> 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/primery/raspisanie.md).

# Расписание

Рассмотрим пример вывода расписания с событиями из значений *<mark style="color:purple;">schedulerEvents</mark>* по умолчанию.

Сначала зададим следующие параметры в редакторе:

* *<mark style="color:purple;">displayDate</mark>* : **2023-04-24** - дата отображаемого интервала расписания
* *<mark style="color:purple;">startHour</mark>*: **8** - расписание будет отображать события, заканчивающиеся не раньше **8:00**
* *<mark style="color:purple;">endHour</mark>*: **20** - расписание будет отображать события начинающиеся не позже **20:00**
* *<mark style="color:purple;">rangeType</mark>*: **Day** - тип отображения расписания "День"

Если всё выполнено корректно, получим следующий UI:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FjP4KaMBqCj0XQ5DAJz3b%2Fimage.png?alt=media&amp;token=39001aa3-5d13-474d-8b7c-bd8da4f39206" alt=""><figcaption><p>Рабочая зона расписания</p></figcaption></figure>

Затем заполним настройки событий *<mark style="color:purple;">eventOptions</mark>* для корректного поглощения данных из *<mark style="color:purple;">schedulerEvents.</mark>* Данные в *<mark style="color:purple;">schedulerEvents</mark>* могут иметь произвольную структуру и ключи значений, поэтому нам необходимо указать, какие из этих значений будут использоваться для отображения / вычисления положения события в рабочей зоне компонента. На основе данных, приведённых в примере, укажем необходимые ключи:

```javascript
   [
      {
        "id": "abc123",
        "eventType": "type1",
        "timeStamps": {
          "start": "2023-04-24T11:18+00:00",
          "end": "2023-04-24T12:48+00:00"
        },
        "eventTitle": "Daily meetup",
        "eventDescription": {
          "value": "Daily task discussion"
        },
        "eventColor": "bgEcru"
      },
      ...
    ]

```

* *<mark style="color:purple;">title</mark>*: **eventTItle** - ключ поля, значение которого будет использовано в качестве заголовка события
* *<mark style="color:purple;">description</mark>*: **eventDescription.value** - путь до значения, которое будет использоваться для описания события
* *<mark style="color:purple;">timeStart</mark>*: **timeStamps.start** - путь до значения с датой начала события
* *<mark style="color:purple;">timeEnd</mark>*: **timeStamps.end** - путь до значения с датой завершения события
* *<mark style="color:purple;">color</mark>*: **eventColor** - цвет блока события

{% hint style="info" %}
Значение цвета может быть как названием переменной [цветовой темы](/ui-konstruktor-oktell/kontroly/upravlenie-temoi-podderzhka-prekrashena.md), так и непосредственно **HEX** кодом необходимого цвета, например **#B8F7FF**
{% endhint %}

* *<mark style="color:purple;">eventId</mark>*: **id** - уникальный идентификатор события. Он будет использован для идентификации элемента расписания при отправке данных на бекенд в событиях элемента

Получим UI вида:

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2Fos8Y1OjPMkobUkagegE8%2Fimage.png?alt=media&amp;token=3fc9bd1b-673b-470c-aa65-189c0b5780ac" alt=""><figcaption><p>Расписание с заполненными данными в eventOptions</p></figcaption></figure>

Добавим действия для элементов событий расписания:

В *<mark style="color:purple;">eventOptions.actions</mark>* добавим элементы действий, аналогично полю *<mark style="color:purple;">actions</mark>* в компоненте [Кнопка](/ui-konstruktor-oktell/kontroly/knopka.md).&#x20;

Действие "комментарий":

* *<mark style="color:purple;">icon</mark>*: **oktell-message**
* *<mark style="color:purple;">events</mark>*:
  * *<mark style="color:purple;">event</mark>*: **onClick**
  * *<mark style="color:purple;">method</mark>*: **event-comment**

{% hint style="info" %}
При нажатии на кнопку действия, сработает соответствующее событие. В **value** данного события будет передан параметр *<mark style="color:purple;">eventId</mark>*, указанный ранее в настройках *<mark style="color:purple;">eventOptions</mark>*.
{% endhint %}

В интерфейсе, в блоке события данное действие будет отображено как обычная кнопка  следующим образом:

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FfcCv5r9WWKSrwqNi2TPo%2Fimage.png?alt=media\&token=85cd0c2d-29c9-426b-aaf8-85f3acd75396)

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

* *<mark style="color:purple;">date</mark>*: **2023-04-25**

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

* *<mark style="color:purple;">date</mark>*: **2023-04-29**

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

Таким образом указанные даты будут указаны в календаре соответственно их типу, вне зависимости от дня недели. В данном случае, во вторник будет отображён выходной день, в то время как в субботу - рабочий

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FXRQePgi13ZmBKibDwFIH%2Fimage.png?alt=media&amp;token=54580e93-cef9-4e13-8950-ba0e091c4260" alt=""><figcaption><p>Отображение выходных/рабочих дней</p></figcaption></figure>

Для случаев, когда необходимо вывести упрощённое расписание в модальном/всплывающем окне, предусмотрен "компактный" вариант отображения расписания. Для его активации, в поле *<mark style="color:purple;">viewType</mark>* необходимо выбрать параметр **compact**. Необходимый тип отображения "День", "Неделя" или "Месяц" можно указать в поле *<mark style="color:purple;">rangeType</mark>*

<figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FJsOBsCy7NQtLorTMkdC6%2Fimage.png?alt=media&amp;token=bcb1c728-1ceb-4dde-a9ad-f3a0839af263" alt=""><figcaption><p>Компактный вариант отображения расписания в режиме "Неделя"</p></figcaption></figure>