RTL (Справа налево) режим

Планировщик поддерживает RTL режим, который можно активировать с помощью rtl configuration option.

scheduler.config.rtl = true;

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

Related sample:  Basic initialization

Чтобы изменить порядок элементов заголовка планировщика, необходимо настроить их 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>

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

Месячный вид в RTL режиме

Вот как выглядит месячный вид в RTL режиме. Названия и детали событий теперь выравниваются по правой стороне каждого блока события.

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

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

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

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

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

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

Вот классы, которые можно использовать:

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

Например:

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

Этот стиль сдвигает все события планировщика на 5px вправо внутри контейнера.

Наверх