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

Когда вы разрабатываете приложение с dhtmlxScheduler, первым делом нужно инициализировать его, или, проще говоря, отобразить Scheduler на странице.

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

React

Используйте готовый компонент ReactScheduler с пропсами и событиями.

Angular

Интегрируйте Scheduler в проекты на Angular с помощью тонкого обертчика.

Vue

Используйте Scheduler во Vue-приложениях с небольшой обёрткой и реактивной конфигурацией.

Svelte

Встраивайте Scheduler в Svelte с помощью простого компонента, который привязывает конфигурацию и события.

Salesforce

Используйте Scheduler в Salesforce Lightning Web Components и подключайте его к данным организации.

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

через разметку Scheduler
через свойство конфигурации заголовка

Инициализация Scheduler через разметку

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

Подключите файлы кода dhtmlxScheduler на страницу.
Создайте DIV‑контейнер на странице и определите соответствующие DIV‑контейнеры для его элементов.
Инициализируйте dhtmlxScheduler в созданном контейнере с помощью метода init. В качестве параметра метод принимает HTML‑контейнер (или его ID), в который будет отображаться Scheduler.

<!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">
        <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

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

Инициализация Scheduler через конфигурацию заголовка

Вы должны инициализировать Scheduler таким способом, чтобы сделать его адаптивным.

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

Подключите файлы кода dhtmlxScheduler на страницу.
Создайте DIV‑контейнер на странице.
Укажите структуру Scheduler в конфигурационном объекте header.
Инициализируйте dhtmlxScheduler в созданном ранее контейнере с помощью метода init. В качестве параметра метод принимает HTML‑контейнер (или его ID), в который будет отображаться Scheduler.

<!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">
   </div>
</body>   
<script>
    //Структура планировщика
    scheduler.config.header = [
        "day",
        "week",
        "month",
        "date",
        "prev",
        "today",
        "next"
    ];
    scheduler.init('scheduler_here',new Date(2027,0,1),"week"); /*!*/
</script>
</html>

Адаптивный Scheduler

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

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

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

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

Давайте быстро исследуем структуру пакета dhtmlxScheduler, чтобы узнать, где искать файлы.

sources - исходные файлы библиотеки. Файлы не минифицированы и читаются легко. Пакет в основном предназначен для отладки компонентов.

примечание

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

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

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

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

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

<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 не будет корректно отображаться в этом случае, потому что "scheduler_here" установлен на 100% от размера родителя, а размер родителя не задан.

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

Или можно использовать разные единицы измерения для основных размеров 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 изменяет поведение изменения размера по умолчанию у планировщика. По умолчанию dhtmlxScheduler автоматически подгоняет размер под контейнер и использует внутренние полосы прокрутки, чтобы все данные были доступны внутри фиксированного размера контейнера.

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

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

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

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

scheduler.plugins({
    container_autoresize: true
});

Autoresizing the scheduler container

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

Управление заголовками при использовании container_autoresize

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

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

Чтобы зафиксировать заголовки, можно использовать позицию 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{
      /* верхняя координата задаётся в JS */
      margin-left: -1px;
      box-shadow: 0 1px 0px 0px var(--dhx-scheduler-base-colors-border);
  }
</style>

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

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

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`;
   }
});

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

Связанный пример [Container autoresize and sticky header]

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

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

Вы можете найти больше деталей в отдельной статье: Мобильный адаптивный Scheduler.

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

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

import { scheduler } from 'dhtmlx-scheduler';

Для коммерческой, корпоративной или 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){
    const scheduler = dhx.scheduler;
    const Scheduler = dhx.Scheduler;// for Enterprise builds
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2027-07-15 09:00", 
            end_date: "2027-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2027-07-15 10:00", 
            end_date: "2027-07-15 11:00"
        }
    ]);
});

Библиотека dhtmlxScheduler вернёт объект со свойствами scheduler и Scheduler (в коммерческих, 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) {
    const scheduler = dhx.scheduler;
 
    scheduler.init('scheduler_here',new Date(),"week");
    scheduler.parse([
        {
            id: 1, text: "Event 1", start_date: "2027-07-15 09:00", 
            end_date: "2027-07-15 10:00"
        },
        {
            id: 2, text: "Event 2", start_date: "2027-07-15 10:00", 
            end_date: "2027-07-15 11:00"
        }
    ]);
});

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

ядро библиотеки:

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

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.

Инициализация Scheduler через разметку​

Инициализация Scheduler через конфигурацию заголовка​

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

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

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

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

Управление заголовками при использовании container_autoresize​

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

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

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

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