> 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/smeny-ocheredi.md).

# Смены (Очереди)

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FAcTyO9C4izvzOITMgse6%2Fimage.png?alt=media\&token=5a5d067e-47d5-404a-95a8-4a543cdde589)

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

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

* *<mark style="color:purple;">displayDate -</mark>* Свойство для указания текущей отображаемой даты в формате **YYYY-MM-DD**

* *<mark style="color:purple;">todayDate -</mark>* Свойство для указания даты, которая будет маркировать "сегодняшний" день в календаре. По умолчанию отображается дата для текущего дня.

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

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

* *<mark style="color:purple;">days</mark>* - массив данных для отображения данных дней с заполненным расписанием
  * *<mark style="color:purple;">id</mark>* - идентификатор дня
  * *<mark style="color:purple;">date</mark>* - дата в формате **YYYY-MM-DD**
  * *<mark style="color:purple;">shifts</mark>* - массив идентификаторов шаблонов смен, активных в данный день&#x20;

* *<mark style="color:purple;">users</mark>*- массив данных пользователей
  * *<mark style="color:purple;">id</mark>* - идентификатор пользователя
  * *<mark style="color:purple;">name</mark>* - имя пользователя
  * *<mark style="color:purple;">icon</mark>* - ссылка на изображение (аватар) пользователя. При отсутствии валидной ссылки будет отображён шаблонный аватар с инициалами пользователя

* *<mark style="color:purple;">templates</mark>* - массив данных шаблонов смен
  * *<mark style="color:purple;">id</mark>* - идентификатор шаблона
  * *<mark style="color:purple;">title</mark>* - наименование шаблона
  * *<mark style="color:purple;">shifts</mark>* - массив смен пользователей&#x20;

    * *<mark style="color:purple;">id</mark>* - идентификатор пользователя
    * *<mark style="color:purple;">start</mark>* - время начала смены пользователя в формате **HH:mm**
    * *<mark style="color:purple;">end</mark>* - время конца смены пользователя в формате **HH:mm**

* *<mark style="color:purple;">userFilter</mark>* - настройки панели фильтрации по пользователям
  * *<mark style="color:purple;">title</mark>* - заголовок панели
  * *<mark style="color:purple;">visible</mark>* - отображать панель
  * *<mark style="color:purple;">max</mark>* - количество пользователей, при превышении которого будет отображён элемент "Показать всех" + Поле поиска пользователя (по id и имени)

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

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

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

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