dhtmlxScheduler на чистом JS/HTML

При создании приложения с dhtmlxScheduler первым шагом является настройка и отображение планировщика на странице.

В этом руководстве описано, как инициализировать dhtmlxScheduler с использованием только JS и HTML. Для интеграции с фронтенд-фреймворками вы можете обратиться к следующим руководствам:


Angular	React	Svelte	Vue.js

Существует два подхода к инициализации планировщика на странице:

использование разметки планировщика
использование свойства конфигурации header

Инициализация планировщика через разметку

Чтобы разместить базовый планировщик на странице с помощью разметки, выполните 3 шага:

Подключите файлы dhtmlxScheduler на вашей странице.
Добавьте контейнер DIV на страницу вместе с необходимыми дочерними DIV для его элементов.
Инициализируйте dhtmlxScheduler в созданном контейнере с помощью метода init. Этот метод принимает HTML-контейнер (или его id), в котором будет отображаться планировщик.

<!DOCTYPE html>
<html>
<head>
   <script src="../scheduler/dhtmlxscheduler.js" type="text/javascript"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" 
        type="text/css">
</head>
<body>
    <!--Контейнер для планировщика и стандартный набор 'div'-->
   <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100vh;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" data-tab="day"></div>
            <div class="dhx_cal_tab" data-tab="week" ></div>
            <div class="dhx_cal_tab" data-tab="month"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
   </div>
   <script type="text/javascript">     scheduler.init("scheduler_here");
   </script>
</body>
</html>

Scheduler initialization

Related sample: Basic initialization

Инициализация планировщика через header config

Этот способ рекомендуется использовать, если вы хотите сделать планировщик адаптивным.

Чтобы разместить базовый планировщик на странице, выполните следующие шаги:

Подключите файлы dhtmlxScheduler на вашей странице.
Добавьте контейнер DIV на страницу.
Определите структуру планировщика в объекте конфигурации header.
Инициализируйте dhtmlxScheduler в контейнере с помощью метода init, передав контейнер (или его id) в качестве параметра.

<!DOCTYPE html>
<html>
<head>
   <script src="../scheduler/dhtmlxscheduler.js"></script>
   <link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" 
        type="text/css">
</head>
<body>
   <!--Контейнер для планировщика-->
   <div id="scheduler_here" style='width:100%; height:100%;'>
   </div>
</body>   
<script>    //Структура планировщика
    scheduler.config.header = [
        "day",
        "week",
        "month",
        "date",
        "prev",
        "today",
        "next"
    ];
    scheduler.init('scheduler_here',new Date(2020,0,1),"week");
</script>
</html>

Related sample: Responsive scheduler

Необходимые файлы

Вам необходимо подключить следующие файлы:

dhtmlxscheduler.js
dhtmlxscheduler.css (также вы можете ознакомиться с доступными скинами в Скины)

<script src="../scheduler/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="../scheduler/dhtmlxscheduler.css" type="text/css">

Ниже приведена краткая структура пакета dhtmlxScheduler, чтобы вы могли быстро найти эти файлы:

sources — содержит исходные файлы библиотеки. Они не минифицированы и удобны для чтения, в основном используются для отладки.

Обратите внимание, что в Trial версии библиотеки планировщика папка sources отсутствует.

samples — содержит примеры кода.
codebase — содержит сжатые файлы библиотеки. Они имеют меньший размер и предназначены для использования в продуктивных проектах. В ваших проектах рекомендуется использовать файлы из этой папки.

Размеры планировщика

Планировщик занимает весь размер своего контейнера (scheduler_here div в приведённых выше примерах), не увеличивая размер самого контейнера.
Это означает, что если вы не зададите высоту контейнера или она будет равна нулю, планировщик также будет иметь нулевую высоту и не будет виден.

В наших примерах планировщик обычно занимает весь экран, устанавливая 100% ширины и высоты как для body документа, так и для контейнера планировщика:

<style>    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style>
</head>
<body>
 <div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">

Проблемы могут возникнуть, если элемент scheduler_here размещён внутри div с настройками размера по умолчанию:

<style>    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style>
</head>
<body>
 <div class="outer_container">    <div id="scheduler_here" class="dhx_cal_container" style="width:100%;height:100%;">

В этом случае планировщик не отобразится корректно, потому что "scheduler_here" установлен на 100% от родительского элемента, но у родителя не задан размер.

Если вы используете относительные размеры (проценты) для элемента .dhx_cal_container, убедитесь, что у его родителя также задана высота. В противном случае вычисленная высота может быть равна нулю, и планировщик не отобразится.

В качестве альтернативы, вы можете использовать другие единицы измерения для размеров основного div планировщика. Следующие примеры будут иметь ожидаемый размер независимо от стилей внешних элементов:

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100vh;">

или:

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:800px;">

Автоматическое изменение размера планировщика

Расширение container_autoresize изменяет стандартное поведение изменения размера планировщика. Обычно dhtmlxScheduler подстраивается под размер своего контейнера и отображает внутренние полосы прокрутки для доступа ко всем данным внутри фиксированного размера контейнера.

С включённым расширением container_autoresize планировщик динамически подстраивает свой размер под всё содержимое. Это значит, что он расширяется по высоте и/или ширине, чтобы отобразить все события и данные без внутренних полос прокрутки.

Это гарантирует видимость всех данных без необходимости прокручивать содержимое внутри планировщика, что полезно, когда требуется полный обзор содержимого без ручной прокрутки.

Использование

Чтобы активировать расширение container_autoresize, включите его в настройках планировщика следующим образом:

scheduler.plugins({
    container_autoresize: true
});

Эта простая настройка активирует функцию container_autoresize, позволяя планировщику изменять размер в зависимости от содержимого.

Работа с заголовками при использовании container_autoresize

Когда включено расширение container_autoresize, Scheduler автоматически изменяет размер, чтобы вместить всё своё содержимое. Иногда это приводит к тому, что Scheduler выходит за пределы экрана, из-за чего на странице или во внешнем контейнере появляются полосы прокрутки.

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

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

<style>
 
  .dhx_cal_container{
    overflow: visible!important;
   }
  .dhx_cal_navline,
  .dhx_cal_header {
      position: sticky;
      z-index: 10;
      background:var(--dhx-scheduler-container-background);
 
  }
  .dhx_cal_navline{
      z-index: 11;
      top:0;
  }
  .dhx_cal_header{
      /* top coordinate is assigned from JS */
      margin-left: -1px;
      box-shadow: 0 1px 0px 0px var(--dhx-scheduler-base-colors-border);
  }
</style>

Кроме того, потребуется JavaScript, чтобы корректно задать верхнюю позицию для фиксированной временной шкалы, разместив её сразу под панелью навигации.

Поскольку высота панели навигации может меняться в зависимости от стилей и содержимого, её высоту нужно вычислять динамически и применять как top для заголовка, например так:

scheduler.attachEvent("onViewChange", function(){
   const navBar = scheduler.$container.querySelector(".dhx_cal_navline");
   const header = scheduler.$container.querySelector(".dhx_cal_header");
   if(navBar && header){
       header.style.top = `${navBar.offsetHeight}px`;
   }
});

Полный пример можно посмотреть в сниппете ниже:

Адаптивность Scheduler

Когда Scheduler инициализируется с помощью свойства header конфигурации, можно выбрать макет заголовка, подходящий для размера экрана клиента. Также применяются определённые стили, которые позволяют элементам и шрифтам хорошо адаптироваться к небольшим экранам.

Больше информации доступно в отдельной статье: Мобильная адаптивность Scheduler.

Импорт файлов в приложения на ES6/7 и TypeScript

Используйте следующую команду для импорта файлов:

import { scheduler } from 'dhtmlx-scheduler';

Для Commercial, Enterprise или Ultimate версий импорт выглядит так:

import { scheduler, Scheduler } from 'dhtmlx-scheduler';

Использование Scheduler с Vite

Если ваш проект использует Vite, добавьте следующую настройку в файл vite.config.js, чтобы Scheduler корректно подключался к вашему приложению:

vite.config.js

optimizeDeps: {
    include: [
        'dhtmlx-scheduler',
    ]
}

Добавление файлов в приложение на RequireJS

Чтобы добавить файлы dhtmlxScheduler в приложение на RequireJS, используйте следующий пример:

requirejs(["codebase/dhtmlxscheduler"], function(dhx){
    var scheduler = dhx.scheduler;
    var Scheduler = dhx.Scheduler;// для сборок Enterprise
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

Библиотека dhtmlxScheduler возвращает объект, содержащий scheduler и Scheduler (в Commercial, Enterprise или Ultimate версиях) — это соответствуют объектам scheduler и Scheduler, описанным здесь.

При использовании Scheduler с пользовательскими расширениями в RequireJS обязательно указывайте конфигурацию shim для RequireJS и объявляйте зависимости расширений от Scheduler.

Ниже приведён пример правильного подключения пользовательского расширения custom_tooltip_plugin.js:

requirejs.config({
    paths: {
        "dhtmlxscheduler": "../../codebase/dhtmlxscheduler",
        "ext/dhtmlxscheduler_custom_tooltip": "../custom_tooltip_plugin"
    },
    shim: {
        "ext/dhtmlxscheduler_custom_tooltip": ["dhtmlxscheduler"]
    }
});
 
requirejs(["dhtmlxscheduler"], 
function (dhx) {
    var scheduler = dhx.scheduler;
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2022-07-15 09:00", 
            end_date: "2022-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2022-07-15 10:00", 
            end_date: "2022-07-15 11:00"
        }
    ]);
});

Убедитесь, что имя модуля для любого файла внутри пакета указывается как относительный путь внутри папки 'codebase' пакета плюс имя файла, например:

основная библиотека:

"dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler"

Наверх