dhtmlxScheduler поддерживает сенсорные устройства, такие как:
Сcheduler также работает на смартфонах, но из-за ограниченного пространства экрана может потребоваться дополнительная настройка.
Полезные советы!
<meta name="viewport" content="width=device-width, initial-scale=1">
Когда вы инициализируете Scheduler с помощью свойства конфигурации header, вы можете выбрать макет header, который подходит для размера экрана клиента. Также применяются стили, корректирующие размеры элементов и шрифтов для небольших экранов.
Например, вы можете разделить header на несколько строк:
На скриншоте выше показан Scheduler на небольшом экране.
Эту настройку можно менять динамически, поэтому вы можете определить разные конфигурации header для больших и маленьких экранов:
// определяем конфигурации
const compactHeader = {
rows: [
{
cols: [
"prev",
"date",
"next",
]
},
{
cols: [
"day",
"week",
"month",
"spacer",
"today"
]
}
]
};
const fullHeader = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
// добавляем переключатель для выбора подходящей конфигурации в зависимости от размера экрана
function resetConfig(){
let header;
if (window.innerWidth < 1000) {
header = compactHeader;
} else {
header = fullHeader;
}
scheduler.config.header = header;
return true;
}
// применяем конфигурацию при инициализации и каждый раз при перерисовке или изменении размера Scheduler:
resetConfig();
scheduler.attachEvent("onBeforeViewChange", resetConfig);
scheduler.attachEvent("onSchedulerResize", resetConfig);
scheduler.config.responsive_lightbox = true; // адаптивный lightbox
scheduler.init("scheduler_here");
Related sample: Responsive scheduler
API Scheduler включает опцию responsive_lightbox, чтобы lightbox адаптировался к разным размерам экранов.
scheduler.config.responsive_lightbox = true; //по умолчанию выключено
//установите true для включения адаптивности lightbox
Вот как lightbox изменяется на небольших экранах:
Related sample: Responsive scheduler
Вы можете настроить внешний вид lightbox в адаптивном режиме. В этом режиме он получает дополнительный CSS-класс dhx_cal_light_responsive, который можно использовать в ваших стилях.
По умолчанию этот класс содержит media-запросы, которые применяются только на небольших экранах (менее 1024px), что позволяет вам изменять внешний вид lightbox на этих устройствах.
Ниже приведены опции конфигурации, связанные с мобильной поддержкой и адаптивностью:
Для улучшения работы на сенсорных устройствах библиотека включает расширение "Quick Info".
Это расширение заменяет стандартные кнопки боковой панели и маленькую форму редактирования (которые трудно нажимать на сенсорных устройствах) на более крупные и удобные элементы управления.
Чтобы включить режим Scheduler с большими кнопками, добавьте расширение "Quick Info" на страницу:
<script>
scheduler.plugins({
quick_info: true
});
scheduler.init('scheduler_here',new Date(2019,5,30),"day");
...
<script>
Related sample: Touch-oriented scheduler
После активации Scheduler заменяет стандартные кнопки на более крупные:
Обратите внимание, что боковое меню выбора quick-info и меню выбора в стандартном Scheduler используют одну и ту же конфигурацию, описанную в icons_select.
Расширение предоставляет: