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

# Таймлайн

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F6GNrN8IS58eG6Vi9z1OF%2Fimage.png?alt=media\&token=ddd9f8eb-6d47-424d-9a5e-0d6816af91cf)

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

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

* *<mark style="color:purple;">scaleColor</mark>* - цвет незаполненных ячеек  шкалы
* *<mark style="color:purple;">activeColor</mark>* - цвет активных ячеек шкалы
* *<mark style="color:purple;">backgroundColor</mark>* - цвет общего фона элемента
* *<mark style="color:purple;">start</mark>* - UTC (GMT+00:00) время начала шкалы в формате **ЧЧ:мм**
* *<mark style="color:purple;">end</mark>*- UTC (GMT+00:00) время конца шкалы в формате **ЧЧ:мм**

{% hint style="info" %}
Необходимость передавать именно UTC время продиктована возможностью нахождения пользователей в разных часовых поясах. Для того, чтобы избежать сложностей связанных с ручным вычислением времени того или иного пользователя при работе конечного пользователя, эти вычисления производятся автоматически. Так, например, при следующих параметрах: текущее время - 14:50 по Москве, шкала - 06:00 - 18:00, смена - 09:00 -  17:00, для пользователя, находящегося в Москве (GMT+03:00) шкала будет иметь вид:&#x20;

<img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FffROygBnrMH3EyNDNolv%2Fimage.png?alt=media&amp;token=8238116e-a258-4dda-9e22-fcbc3d7f72d0" alt="" data-size="original">

А для пользователя в Екатеринбурге (GMT+05:00)

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F4lLfkBI6CrduGcPwFUaY%2Fimage.png?alt=media\&token=e6cfecea-37bc-4686-ada2-eb81eef695ff)

В данных сценариях меняются отображаемые временные отметки начала шкалы/смены, в то время как маркер текущего времени/заполнения смены остаётся одинаковым для обоих пользователей.
{% endhint %}

* *<mark style="color:purple;">GMT</mark>*-  смещение часового пояса относительно UTC в часах.

{% hint style="info" %}
Если, по какой-то причине, передаваемые данные времени отличаются от UTC, возможно "откорректировать" отображение, установив GMT смещение часового пояса тех данных, которые указаны в настройках компонента.
{% endhint %}

* *<mark style="color:purple;">intervalMins</mark>* - размер ячейки шкалы в минутах
* *<mark style="color:purple;">shiftHours</mark>* - настройки "смен" на шкале времени
  * *<mark style="color:purple;">start</mark>* - UTC (GMT+00:00) время начала смены в формате **ЧЧ:мм**
  * *<mark style="color:purple;">end</mark>*- UTC (GMT+00:00) время конца смены в формате **ЧЧ:мм**
* *<mark style="color:purple;">activities</mark>* - настройки "активности" пользователя в смене
  * *<mark style="color:purple;">start</mark>* - UTC (GMT+00:00) время начала активности в формате **ЧЧ:мм:сс**
  * *<mark style="color:purple;">end</mark>*- UTC (GMT+00:00) время конца активности в формате **ЧЧ:мм:сс**
  * *<mark style="color:purple;">color</mark>* - цвет UI элемента активности
  * *<mark style="color:purple;">title</mark>* - (необязательное) заголовок активности, отображается по наведению мыши на соответствующий событию элемент UI