# Calendar Компоненты календарей для выбора даты или диапазона дат. ## Calendar Props (свойства) для компонента Calendar: [{"name":"value","type":{"name":"(Date & CalendarValueType) | [DateType, DateType]"}},{"name":"isRange","type":{"name":"boolean"}},{"name":"isDouble","type":{"name":"boolean"}},{"name":"onChangeValue","type":{"name":"((value: Date, dateInfo?: DateInfo | undefined) => void) | ((values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void)"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] Представляет собой универсальный компонент  `Calendar` , в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном.
```tsx
import React from 'react';
import { Calendar } from '@salutejs/plasma-web';
export function App() {
const isRange = false;
const isDouble = false;
const min = new Date(2022, 4, 0);
const max = new Date(2022, 6, 15);
const date = {
day: 6,
monthIndex: 5,
year: 2022,
}
const [value, setValue] = React.useState(undefined);
const [valueRange, setValueRange] = React.useState([undefined]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
const handleOnRangeChange = React.useCallback((newValue) => {
setValueRange(newValue);
}, []);
const baseEvents = [
{
date: new Date(2022, 5, 6),
},
{
date: new Date(2022, 5, 10),
color: 'red',
},
{
date: new Date(2022, 5, 10),
color: 'green',
},
{
date: new Date(2022, 5, 10),
color: 'blue',
},
];
const eventsRange = Array.from(Array(10),((_, day) => ({
date: new Date(2022, 5, 15 + day),
color: 'purple',
})));
const disabledDays = Array.from(Array(5),((_, day) => ({
date: new Date(2022, 5, 11 + day),
})));
return (
<div>
<Calendar
isRange={isRange}
isDouble={isDouble}
value={(isRange ? valueRange : value)}
eventList={[...baseEvents, ...eventsRange]}
disabledList={disabledDays}
date={date}
min={min}
max={max}
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
/>
</div>
);
}
```
# Calendar Компоненты календарей для выбора даты или диапазона дат. ## Calendar Props (свойства) для компонента Calendar: [{"name":"value","type":{"name":"(Date & CalendarValueType) | [DateType, DateType]"}},{"name":"isRange","type":{"name":"boolean"}},{"name":"isDouble","type":{"name":"boolean"}},{"name":"onChangeValue","type":{"name":"((value: Date, dateInfo?: DateInfo | undefined) => void) | ((values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void)"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] Представляет собой универсальный компонент  `Calendar` , в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном. ```tsx
import React from 'react';
import { Calendar } from '@salutejs/plasma-web';
export function App() {
const isRange = false;
const isDouble = false;
const min = new Date(2022, 4, 0);
const max = new Date(2022, 6, 15);
const date = {
day: 6,
monthIndex: 5,
year: 2022,
}
const [value, setValue] = React.useState(undefined);
const [valueRange, setValueRange] = React.useState([undefined]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
const handleOnRangeChange = React.useCallback((newValue) => {
setValueRange(newValue);
}, []);
const baseEvents = [
{
date: new Date(2022, 5, 6),
},
{
date: new Date(2022, 5, 10),
color: 'red',
},
{
date: new Date(2022, 5, 10),
color: 'green',
},
{
date: new Date(2022, 5, 10),
color: 'blue',
},
];
const eventsRange = Array.from(Array(10),((_, day) => ({
date: new Date(2022, 5, 15 + day),
color: 'purple',
})));
const disabledDays = Array.from(Array(5),((_, day) => ({
date: new Date(2022, 5, 11 + day),
})));
return (
<div>
<Calendar
isRange={isRange}
isDouble={isDouble}
value={(isRange ? valueRange : value)}
eventList={[...baseEvents, ...eventsRange]}
disabledList={disabledDays}
date={date}
min={min}
max={max}
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBase: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}]
```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBase
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
# Calendar Компоненты календарей для выбора даты или диапазона дат. ## Calendar Props (свойства) для компонента Calendar: [{"name":"value","type":{"name":"(Date & CalendarValueType) | [DateType, DateType]"}},{"name":"isRange","type":{"name":"boolean"}},{"name":"isDouble","type":{"name":"boolean"}},{"name":"onChangeValue","type":{"name":"((value: Date, dateInfo?: DateInfo | undefined) => void) | ((values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void)"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] Представляет собой универсальный компонент  `Calendar` , в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном. ```tsx
import React from 'react';
import { Calendar } from '@salutejs/plasma-web';
export function App() {
const isRange = false;
const isDouble = false;
const min = new Date(2022, 4, 0);
const max = new Date(2022, 6, 15);
const date = {
day: 6,
monthIndex: 5,
year: 2022,
}
const [value, setValue] = React.useState(undefined);
const [valueRange, setValueRange] = React.useState([undefined]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
const handleOnRangeChange = React.useCallback((newValue) => {
setValueRange(newValue);
}, []);
const baseEvents = [
{
date: new Date(2022, 5, 6),
},
{
date: new Date(2022, 5, 10),
color: 'red',
},
{
date: new Date(2022, 5, 10),
color: 'green',
},
{
date: new Date(2022, 5, 10),
color: 'blue',
},
];
const eventsRange = Array.from(Array(10),((_, day) => ({
date: new Date(2022, 5, 15 + day),
color: 'purple',
})));
const disabledDays = Array.from(Array(5),((_, day) => ({
date: new Date(2022, 5, 11 + day),
})));
return (
<div>
<Calendar
isRange={isRange}
isDouble={isDouble}
value={(isRange ? valueRange : value)}
eventList={[...baseEvents, ...eventsRange]}
disabledList={disabledDays}
date={date}
min={min}
max={max}
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBase: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}] ```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBase
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarDouble: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}]
```tsx
import React from 'react';
import { CalendarDouble } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarDouble
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
# Calendar Компоненты календарей для выбора даты или диапазона дат. ## Calendar Props (свойства) для компонента Calendar: [{"name":"value","type":{"name":"(Date & CalendarValueType) | [DateType, DateType]"}},{"name":"isRange","type":{"name":"boolean"}},{"name":"isDouble","type":{"name":"boolean"}},{"name":"onChangeValue","type":{"name":"((value: Date, dateInfo?: DateInfo | undefined) => void) | ((values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void)"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] Представляет собой универсальный компонент  `Calendar` , в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном. ```tsx
import React from 'react';
import { Calendar } from '@salutejs/plasma-web';
export function App() {
const isRange = false;
const isDouble = false;
const min = new Date(2022, 4, 0);
const max = new Date(2022, 6, 15);
const date = {
day: 6,
monthIndex: 5,
year: 2022,
}
const [value, setValue] = React.useState(undefined);
const [valueRange, setValueRange] = React.useState([undefined]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
const handleOnRangeChange = React.useCallback((newValue) => {
setValueRange(newValue);
}, []);
const baseEvents = [
{
date: new Date(2022, 5, 6),
},
{
date: new Date(2022, 5, 10),
color: 'red',
},
{
date: new Date(2022, 5, 10),
color: 'green',
},
{
date: new Date(2022, 5, 10),
color: 'blue',
},
];
const eventsRange = Array.from(Array(10),((_, day) => ({
date: new Date(2022, 5, 15 + day),
color: 'purple',
})));
const disabledDays = Array.from(Array(5),((_, day) => ({
date: new Date(2022, 5, 11 + day),
})));
return (
<div>
<Calendar
isRange={isRange}
isDouble={isDouble}
value={(isRange ? valueRange : value)}
eventList={[...baseEvents, ...eventsRange]}
disabledList={disabledDays}
date={date}
min={min}
max={max}
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBase: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}] ```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBase
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarDouble: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}] ```tsx
import React from 'react';
import { CalendarDouble } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarDouble
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBaseRange: [{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"view","type":{"name":"string"}},{"name":"date","type":{"name":"DateObject"}},{"name":"size","type":{"name":"string"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"value","type":{"name":"[DateType, DateType]"}},{"name":"onChangeValue","type":{"name":"(values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}]
```tsx
import React from 'react';
import { CalendarBaseRange } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 16)]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBaseRange
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
# Calendar Компоненты календарей для выбора даты или диапазона дат. ## Calendar Props (свойства) для компонента Calendar: [{"name":"value","type":{"name":"(Date & CalendarValueType) | [DateType, DateType]"}},{"name":"isRange","type":{"name":"boolean"}},{"name":"isDouble","type":{"name":"boolean"}},{"name":"onChangeValue","type":{"name":"((value: Date, dateInfo?: DateInfo | undefined) => void) | ((values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void)"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"size","type":{"name":"string"}},{"name":"view","type":{"name":"string"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] Представляет собой универсальный компонент  `Calendar` , в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном. ```tsx
import React from 'react';
import { Calendar } from '@salutejs/plasma-web';
export function App() {
const isRange = false;
const isDouble = false;
const min = new Date(2022, 4, 0);
const max = new Date(2022, 6, 15);
const date = {
day: 6,
monthIndex: 5,
year: 2022,
}
const [value, setValue] = React.useState(undefined);
const [valueRange, setValueRange] = React.useState([undefined]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
const handleOnRangeChange = React.useCallback((newValue) => {
setValueRange(newValue);
}, []);
const baseEvents = [
{
date: new Date(2022, 5, 6),
},
{
date: new Date(2022, 5, 10),
color: 'red',
},
{
date: new Date(2022, 5, 10),
color: 'green',
},
{
date: new Date(2022, 5, 10),
color: 'blue',
},
];
const eventsRange = Array.from(Array(10),((_, day) => ({
date: new Date(2022, 5, 15 + day),
color: 'purple',
})));
const disabledDays = Array.from(Array(5),((_, day) => ({
date: new Date(2022, 5, 11 + day),
})));
return (
<div>
<Calendar
isRange={isRange}
isDouble={isDouble}
value={(isRange ? valueRange : value)}
eventList={[...baseEvents, ...eventsRange]}
disabledList={disabledDays}
date={date}
min={min}
max={max}
onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBase: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}] ```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBase
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarDouble: [{"name":"view","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"value","type":{"name":"CalendarValueType"}},{"name":"onChangeValue","type":{"name":"(value: Date, dateInfo?: DateInfo | undefined) => void"}},{"name":"date","type":{"name":"DateObject"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}}] ```tsx
import React from 'react';
import { CalendarDouble } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState(new Date(2022, 5, 6));
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarDouble
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarBaseRange: [{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"view","type":{"name":"string"}},{"name":"date","type":{"name":"DateObject"}},{"name":"size","type":{"name":"string"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"value","type":{"name":"[DateType, DateType]"}},{"name":"onChangeValue","type":{"name":"(values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}] ```tsx
import React from 'react';
import { CalendarBaseRange } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 16)]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarBaseRange
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
Props (свойства) для компонента CalendarDoubleRange: [{"name":"type","type":{"name":"enum","raw":"\"Days\" | \"Months\" | \"Years\" | \"Quarters\"","value":[{"value":"\"Days\""},{"value":"\"Months\""},{"value":"\"Years\""},{"value":"\"Quarters\""}]}},{"name":"view","type":{"name":"string"}},{"name":"date","type":{"name":"DateObject"}},{"name":"size","type":{"name":"string"}},{"name":"min","type":{"name":"Date"}},{"name":"max","type":{"name":"Date"}},{"name":"renderFromDate","type":{"name":"Date"}},{"name":"includeEdgeDates","type":{"name":"boolean"}},{"name":"eventList","type":{"name":"EventDay[]"}},{"name":"disabledList","type":{"name":"DisabledDay[]"}},{"name":"eventMonthList","type":{"name":"EventDay[]"}},{"name":"disabledMonthList","type":{"name":"DisabledDay[]"}},{"name":"eventQuarterList","type":{"name":"EventDay[]"}},{"name":"disabledQuarterList","type":{"name":"DisabledDay[]"}},{"name":"eventYearList","type":{"name":"EventDay[]"}},{"name":"disabledYearList","type":{"name":"DisabledDay[]"}},{"name":"locale","type":{"name":"enum","raw":"Locales","value":[{"value":"\"ru\""},{"value":"\"en\""}]}},{"name":"stretched","type":{"name":"boolean"}},{"name":"value","type":{"name":"[DateType, DateType]"}},{"name":"onChangeValue","type":{"name":"(values: [DateType, DateType], dateInfo?: DateInfo | undefined) => void"}},{"name":"onChangeStartOfRange","type":{"name":"((value: Date, dateInfo?: DateInfo) => void)"}}]
```tsx
import React from 'react';
import { CalendarDoubleRange } from '@salutejs/plasma-web';
export function App() {
const min = new Date(2022, 4, 0);
const max = new Date(2022, 7, 15);
const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 6, 16)]);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div>
<CalendarDoubleRange
value={value}
min={min}
max={max}
onChangeValue={handleOnChange}
/>
</div>
);
}
```
## Размер календаря. Размер календаря задается с помощью свойства  `size` . 
```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = React.useState(undefined);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
size="l"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
size="m"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
size="s"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
size="xs"
/>
</div>
);
}
```
## Сетка выбора даты. Конечное отображение сетки календаря задается с помощью свойства  `type` . 
```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
const [value, setValue] = React.useState(undefined);
const handleOnChange = React.useCallback((newValue) => {
setValue(newValue);
}, []);
return (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
type="Days"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
type="Months"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
type="Quarters"
/>
<CalendarBase
value={value}
onChangeValue={handleOnChange}
type="Years"
/>
</div>
);
}
```
## Выбор языка. Для выбора языка необходимо указать свойство  `locale: 'ru' | 'en'` . По-умолчанию используется  `ru` . 
```tsx
import React from 'react';
import { CalendarBase } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
<CalendarBase
type="Days"
locale="en"
/>
<CalendarBase
type="Months"
locale="en"
/>
</div>
);
}
```