RTL (Right-to-left) режим

Вы можете включить режим RTL для планировщика через опцию конфигурации rtl.

scheduler.config.rtl = true;

После внедрения режима RTL все элементы календаря будут автоматически отображаться справа налево, за исключением элементов заголовка планировщика.

rtl

Базовая инициализация

Чтобы поменять порядок элементов заголовка планировщика, необходимо переопределить CSS-классы элементов, как показано:

<style type="text/css" >
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }    
    
      .dhx_cal_prev_button{right: auto !important; left: 16px !important;}
      .dhx_cal_next_button{right: auto !important; left: 148px !important;}
      .dhx_cal_today_button{right: auto !important; left: 57px !important;}
      .dhx_cal_tab[name="day_tab"]{left: auto !important; right: 16px !important;}
      .dhx_cal_tab[name="week_tab"]{left: auto !important; right: 103px !important;}
      .dhx_cal_tab[name="month_tab"]{left: auto !important; right: 192px !important;}
      .dhx_cal_container_rtl  .dhx_cal_tab {
        border-right-style: solid;
        border-right-width: 1px;
       }
</style>

reorder_header_rtl

Примеры режима RTL

Просмотр месяца в режиме RTL

Давайте посмотрим, как выглядит просмотр месяца в режиме RTL. Заголовки событий и их детали теперь располагаются справа от блока события.

month_view_rtl

Окно события в режиме RTL

Ниже приведён хороший пример того, как внешний вид окна с деталями события изменяется после применения режима RTL на изображении ниже.

window_with_details

Таймлайн в режиме RTL

Режим RTL автоматически располагает таймлайны в планировщике справа налево.

timeline_rtl

Настройка элементов в режиме RTL

Вы можете использовать дополнительные CSS-классы для применения уникальных стилей к отдельным элементам в режиме RTL.

Это список CSS-классов, которые можно задать:

dhx_cal_container_rtl - применяет стили ко всему контейнеру
dhx_tooltip_rtl - применяет стили к тултипу
dhx_quick_info_rtl - применяет стили к всплывающему окну 'быстрая информация'
dhx_cal_light_rtl - применяет стили к лайтбоксу

Например:

.dhx_cal_container_rtl .dhx_cal_event{
    margin-right: -5px;
}

Все события контейнера планировщика перемещены на 5px вправо.

Need help?

Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.

Примеры режима RTL​

Настройка элементов в режиме RTL​

Примеры режима RTL

Настройка элементов в режиме RTL