Перейти к основному содержимому

Обзор DHTMLX Scheduler

DHTMLX Scheduler - это JavaScript-компонент календаря событий для отображения и редактирования расписаний в браузере. Он поддерживает классические календарные представления (День/Неделя/Месяц/Год), расширенное редактирование событий (создание/изменение длительности/перемещение drag-and-drop + Lightbox), повторяющиеся серии, а также расширенные режимы планирования ресурсов (Timeline/Units в PRO).

DHTMLX Scheduler доступен в редакциях Standard и PRO. Standard-редакция распространяется через публичные источники пакетов, а PRO/Evaluation можно установить из приватного npm-реестра (или добавить вручную).

Быстрый старт по фреймворкам​

Вы можете использовать DHTMLX Scheduler как виджет на vanilla JavaScript или интегрировать его в современный фреймворк. Выберите пошаговый гайд под ваш стек:

javascript
JavaScript

Минимальная настройка через script-теги или bundler.

react
React

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

angular
Angular

Интегрируйте Scheduler в Angular-проекты через тонкий wrapper.

vue
Vue

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

svelte
Svelte

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

react
React

Встраивайте core-виджет Scheduler в свои компоненты для полного контроля жизненного цикла и потока данных.

salesforce
Salesforce

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

Live demos​

Чтобы увидеть DHTMLX Scheduler в действии, посмотрите онлайн-демо:

Ключевые возможности​

DHTMLX Scheduler ориентирован на интерактивный календарный UX и расширяемость. Ниже перечислены основные области с переходами к подробным разделам.

Календарные представления и навигация​

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

Создание и редактирование событий​

Scheduler спроектирован для редактирования в стиле "календарь в центре":

  • Создание, изменение размера и перемещение через drag-and-drop (настраивается).
  • Встроенный редактор (Lightbox) и опциональные попапы Quick Info через расширения.
  • Templates для текста события, Tooltips, заголовков и фрагментов UI (для полного контроля рендеринга).

Повторяющиеся серии и исключения​

Повторяющиеся события поддерживаются через отдельное расширение и современный формат повторения. См. Recurring Events.

Планирование ресурсов (PRO)​

PRO добавляет расширенные режимы, часто используемые для планирования ресурсов:

  • Представление Timeline, Units, Week Agenda, Grid и другие расширения только для PRO.
  • Мультисекционные события (назначение одного события нескольким ресурсам/секциям) через расширение Multisection.

Загрузка данных, форматы и синхронизация​

Scheduler можно подключить к вашему слою данных несколькими способами:

  • Загружать данные с backend и поддерживать синхронизацию (часто используется REST-подобный API + DataProcessor).
  • Доступны серверные гайды How to start для разных стеков (Node, ASP.NET Core, PHP/Laravel, Ruby и др.).

Интеграция с фреймворками и backend​

Frontend-интеграция​

Scheduler можно использовать:

Примечания по установке​

  • Standard-редакция:
    • npm install dhtmlx-scheduler
    • или подключение с CDN.
  • PRO/Evaluation:

Что дальше​

Если вы только начинаете:

  1. Выберите один из гайдов в разделе «Быстрый старт по фреймворкам» или начните с инициализации на чистом HTML/JS.
  2. Настройте UI: header, views, templates и правила редактирования.
  3. Включите нужные расширения - Recurring, Timeline/Units в PRO, Quick Info, Tooltip и т.д.
  4. Подключите backend по гайдам Server-Side Integration.
  5. Изучите Guides и API reference для более глубокой кастомизации.

При обновлении проверьте разделы What's new и migration guides.

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.
Need more help?Contact Support