Мобильная адаптивность Scheduler

dhtmlxScheduler поддерживает сенсорные устройства, такие как:

• устройства iOS (iPad, iPhone, iPod);
• планшеты и мониторы с сенсорным экраном на Windows 10;
• устройства Android.

Сcheduler также работает на смартфонах, но из-за ограниченного пространства экрана может потребоваться дополнительная настройка.

Полезные советы!

• Поддержка сенсорных экранов включена по умолчанию и работает во всех режимах Scheduler.
• Для приложений, ориентированных на сенсорные устройства, настоятельно рекомендуется использовать 'material' skin, поскольку он предлагает крупные, удобные для нажатия кнопки.
• Если вы ожидаете пользователей с мобильных устройств, обычно разумно добавить Quick Info.
• Добавление следующего meta-тега на страницу увеличит элементы Scheduler и упростит взаимодействие с ними:

<meta name="viewport" content="width="device-width," initial-scale="1""/>

Адаптивный макет

Когда вы инициализируете Scheduler с помощью свойства конфигурации header, вы можете выбрать макет 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");

Responsive scheduler

Lightbox

API Scheduler включает опцию responsive_lightbox, чтобы lightbox адаптировался к разным размерам экранов.

scheduler.config.responsive_lightbox = true; //по умолчанию выключено
//установите true для включения адаптивности lightbox

Вот как lightbox изменяется на небольших экранах:

Responsive scheduler

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

По умолчанию этот класс содержит media-запросы, которые применяются только на небольших экранах (менее 1024px), что позволяет вам изменять внешний вид lightbox на этих устройствах.

Опции конфигурации для сенсорных устройств

Ниже приведены опции конфигурации, связанные с мобильной поддержкой и адаптивностью:

• header - управляет макетом header
• touch - включает или отключает поддержку сенсорных экранов в Scheduler
• touch_drag - задаёт время в миллисекундах для различения долгого нажатия и прокрутки
• touch_tip - включает или отключает всплывающие сообщения в правом верхнем углу
• touch_swipe_dates - включает или отключает свайпы для переключения дат
• responsive_lightbox - включает адаптивные стили для lightbox (по умолчанию выключено)

Сенсорные жесты в Scheduler

• Двойное нажатие - работает как двойной клик, открывая редактирование или создание события;
• Долгое нажатие и перетаскивание - используется для перемещения или создания событий;
• Свайп - переключает представление на следующий или предыдущий временной промежуток (по умолчанию выключено).

Расширение 'Quick info'

Для улучшения работы на сенсорных устройствах библиотека включает расширение "Quick Info".

Это расширение заменяет стандартные кнопки боковой панели и маленькую форму редактирования (которые трудно нажимать на сенсорных устройствах) на более крупные и удобные элементы управления.

Чтобы включить режим Scheduler с большими кнопками, добавьте расширение "Quick Info" на страницу:

<script>
    scheduler.plugins({
        quick_info: true
    });
    scheduler.init('scheduler_here',new Date(2019,5,30),"day");
      ...
<script>

Touch-oriented scheduler

После активации Scheduler заменяет стандартные кнопки на более крупные:

примечание

Обратите внимание, что боковое меню выбора quick-info и меню выбора в стандартном Scheduler используют одну и ту же конфигурацию, описанную в icons_select.

Расширение предоставляет:

• 3 шаблона

• quick_info_content - определяет содержимое всплывающей формы редактирования

• quick_info_date - определяет отображаемую дату во всплывающей форме

• quick_info_title - определяет заголовок всплывающей формы

• 1 опция конфигурации

• quick_info_detached - управляет тем, появляется ли форма события сбоку экрана или рядом с выбранным событием

• 2 метода

• hideQuickInfo - скрывает всплывающую форму события, если она открыта

• showQuickInfo - показывает всплывающую форму события для конкретного события

• 2 события

• onQuickInfo - срабатывает при появлении всплывающей формы редактирования

• onAfterQuickInfo - срабатывает после закрытия всплывающей формы события