> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/kalendar-raspisanie.md).

# Календарь (Расписание)

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FVCRIdTZRYXBx0eSJ2hP9%2Fimage.png?alt=media\&token=03d6bbe7-9be4-4273-ba81-eed7b7a2aeed)

Компонент для отображения различных событий в календаре и действий с ними

#### Свойства:

* *<mark style="color:purple;">displayDate</mark>*

Свойство для указания текущей отображаемой даты в формате **YYYY-MM-DD**

* *<mark style="color:purple;">todayDate</mark>*

Свойство для указания даты, которая будет маркировать "сегодняшний" день в календаре. По умолчанию отображается дата для текущего дня.

* *<mark style="color:purple;">rangeTypes -</mark>* Список доступных видов для отображения:
  * **Day** - вид отображения "День"
  * **Week** - вид отображения "Неделя"
  * **Month** - вид отображения "Месяц"&#x20;

* *<mark style="color:purple;">rangeType</mark>* - вид отображения по умолчанию

* *<mark style="color:purple;">holidays</mark>* - список частных случаев для отображения выходных/рабочих дней. Элементы списка содержат следующие поля:
  * *<mark style="color:purple;">date</mark>* - дата выходного/рабочего дня
  * *<mark style="color:purple;">type</mark>* - тип дня: **workday** - рабочий день, **holiday** - выходной день

* *<mark style="color:purple;">schedulerEvents</mark>* - массив данных для отображения событий календаря

{% hint style="info" %}
*<mark style="color:red;">Важно</mark>*. Наименование полей элемента  массива  события может быть произвольным, но необходимо, чтобы он содержал поля со следующими данными: уникальный идентификатор, дата начала события, дата его завершения.
{% endhint %}

* *<mark style="color:purple;">eventOptions</mark>* - настройки полей события, которые будут использованы при формировании его контента. Все поля, кроме *<mark style="color:purple;">actions</mark>* принимают или ключ значения (например **eventTitle**) или путь до необходимого вложенного значения (например **ext.meta.title**)
  * *<mark style="color:purple;">title</mark>* - заголовок&#x20;
  * *<mark style="color:purple;">description</mark>* - описание
  * *<mark style="color:purple;">timeStart</mark>* - дата начала события в формате **YYYY**-**MM**-**DD**T**HH**:**mm**+**HH**:**mm**
  * *<mark style="color:purple;">timeEnd</mark>* - дата завершения события в формате **YYYY**-**MM**-**DD**T**HH**:**mm**+**HH**:**mm**
  * *<mark style="color:purple;">color</mark>* - цвет события в календаре.&#x20;
  * *<mark style="color:purple;">eventId</mark>* - уникальный идентификатор события
  * *<mark style="color:purple;">actions</mark>* - список действий события. Параметр работает как аналогичный в разделе [Кнопка](/ui-konstruktor-oktell/kontroly/knopka.md)
* *<mark style="color:purple;">startHour</mark>* - числовое значение часа начала диапазона отображения календаря. Например **9**, если необходимо показывать события с **9** утра. По умолчанию имеет значение **7**.
* *<mark style="color:purple;">endHour</mark>* - числовое значение часа конца диапазона отображения календаря. По умолчанию **20**
* *<mark style="color:purple;">viewType</mark>* - вид отображения компонента
  * **compact** - Компактный
  * **standart** (default) - Стандартный

#### **События**:

&#x20;На данный момент поддерживаются следующие события компонента:

* *<mark style="background-color:purple;">onNavigate</mark>* - срабатывает при выполнении навигации "вперёд/назад"
* *<mark style="background-color:purple;">onDayClick</mark>* - срабатывает при нажатии на заголовок дня&#x20;
* *<mark style="background-color:purple;">onCellClick</mark>* - срабатывает при нажатии на пустую ячейку расписания

Все события передают в качестве параметра соответствующую им дату в формате **YYYY-MM-DD**