Обзор DHTMLX Scheduler
DHTMLX Scheduler — это гибко настраиваемый JavaScript-компонент календаря событий, поставляемый с определениями типов для TypeScript. Он предназначен для отображения, редактирования и управления расписаниями непосредственно в браузере. Компонент интегрируется с React, Angular, Vue и другими фронтенд-фреймворками. DHTMLX Scheduler также поддерживает разработку с использованием ИИ благодаря DHTMLX MCP Server, Agent Skills и структурированному API.
Вы можете использовать его в управлении проектами, CRM, системах бронирования, здравоохранении, образовании, сервисном обслуживании на местах, SaaS и других бизнес-приложениях, которым требуется интерактивный календарь, планировщик событий или временная шкала планирования ресурсов.
Быстрый старт по фреймворкам
Вы можете использовать DHTMLX Scheduler как обычный виджет на JavaScript или интегрировать его в современный фреймворк. Начните с пошагового руководства, подходящего вашему стеку технологий:
React, Angular и Vue поддерживают два подхода к интеграции:
- Готовые обёртки React Scheduler, Angular Scheduler, и Vue Scheduler (рекомендуются для PRO и проектов-оценок)
- Прямая интеграция базового JavaScript Scheduler компонента с React, Angular, Vue (Standard edition)
Живые демо
Чтобы увидеть DHTMLX Scheduler в действии, изучите одни из самых популярных демо:
- Basic initialization (week view)
- Recurring events и Timeline view performance примеры
- Templates example
Посмотрите All Samples, чтобы проверить полный набор возможностей Scheduler.
Для ориентированных на фреймворк стартовых точек смотрите примеры репозиториев для React, Angular и Vue.
Некоторые примеры демонстрируют функциональность PRO, поэтому перед повторным использованием их в проекте Standard edition ознакомьтесь с сравнением Standard vs PRO.
Ресурсы разработчика
- Installation guide для Standard, trial и PRO потоков настройки
- Standard vs PRO comparison для различий по функциям между редакциями
- Открытая npm-пакет JavaScript Scheduler в рамках Standard edition
- GitHub репозиторий исходного кода Standard edition и отслеживания проблем
- API reference и samples для деталей реализации
- What's New релизы и миграционные заметки
Основные возможности Scheduler
DHTMLX Scheduler включает несколько видов календаря, богатые средства редактирования событий и планирования ресурсов.
Виды календаря и навигация
По сути, Scheduler рендерит классические виды календаря и позволяет пользователям перемещаться во времени. Он включает:
- Day, Week, Month, Year и Agenda views для визуализации расписаний в любом масштабе.
- настраиваемый header с элементами навигации и вкладками видов.
Создание и редактирование событий
Компонент предусмотрит "calendar-first" редактирование, т.е. пользователи могут быстро создавать или обновлять события прямо на календаре:
- Взаимодействие с событиями в планировщике с помощью функций создания, изменения размера и перемещения методом перетаскивания (drag-and-drop).
- Гибкий редактор событий (лайтбокс) для ввода полной информации о событии, а также опциональные всплывающие окна Quick Info для быстрого редактирования.
- Перетаскивание между планировщиками для перемещения событий из одного планировщика в другой.
- Интеграция drag-and-drop с внешними источниками для добавления записей из других компонентов в планировщик в качестве новых событий.
- Обновление данных в реально м времени для нескольких пользователей при совместной работе с планировщиком.
Повторяющиеся серии и исключения
Повторяющиеся события поддерживаются через отдельное расширение и RFC 5545 совместимый формат повторения:
- Повторяющиеся события с исключениями для отдельных вхождений.
- Валидация и предотвращение конфликтов для поддержания согласованности расписаний.
Виды планирования ресурсов (PRO)
Для команд, которым требуется больше, чем просто календарь, PRO-издание DHTMLX Scheduler предоставляет расширенные режимы план ирования:
- Представления Timeline и Units для планирования ресурсов.
- Представления Week Agenda и Grid для компактного планирования в формате списка.
- События, охватывающие несколько секций, позволяющие назначать одно событие сразу нескольким ресурсам.
Экспорт и экосистема
Команды часто нуждаются в совместном использовании расписаний, локальных копиях или синхронизации с внешними календарями. DHTMLX Scheduler интегрируется с внешними инструментами и форматами вывода, поддерживая:
- Экспорт в PDF, PNG, Excel и iCal.
- Двусторонняя синхронизация с Google Календарем.
Кастомизация и стилизация
Внешний вид календаря можно настраивать на любом уровне — от полной темы до одного блока события через:
- Набор встроенных скинов с поддержкой глубокой настройки и создания новых тем.
- Шаблоны для содержимого событий, заголовков, всплывающих подсказок и других элементов интерфейса.
- Поддержка локализации языка интерфейса и форматов даты/времени, а также режима RTL.
Выпуски и лицензирование
DHTMLX Scheduler доступен в двух редакциях: Standard и PRO. Вы можете начать с бесплатной Standard edition и позже перейти на PRO, если вам нужны дополнительные функции, официальная поддержка и полностью поддерживаемая основа Scheduler. Также можно начать напрямую с PRO-издания либо через официальный пробный период, либо с платной лицензией. Выберите один из вариантов:
- Standard edition. Распространяется через публичные источники пакетов (npm, CDN), охватывает ядро интерактивного календаря.
- Official trial Позволяет оценить полный набор функций PRO и получить техническую поддержку в течение пробного периода.
- PRO edition Разработано для рабочих окружений, включает продвинутые функции планирования, официальную поддержку и коммерческую лицензию. Устанавливается из закрытого реестра npm или добавляется вручную.
Чтобы увидеть точные различия функций между редакциями, смотрите Standard vs PRO comparison. Для процесса установки каждой опции смотрите installation guide.
Standard edition доступна только по лицензии GNU GPL v2. Чтобы использовать DHTMLX Scheduler в проектах с лицензией, отличной от GPL (и получить PRO-версию продукта), пожалуйста, приобретите лицензию Individual, Commercial, Enterprise, Ultimate или Startup на нашем сайте или свяжитесь с нами по sales@dhtmlx.com.
Инструменты AI-помощи в кодировании
Для разработки с поддержкой ИИ начните с руководств DHTMLX Scheduler, созданных специально для помощников по коду:
Backend интеграция
DHTMLX Scheduler позволяет подключаться к любому бэкенду, реализуя RESTful API на сервере:
- Данные (как для событий, так и для правил их повторения) обычно загружаются и сохраняются в формате JSON.
- Встроенный компонент DataProcessor помогает направлять запросы на создание, обновление и удаление данных на ваш сервер.
- Доступны руководства для популярных бэкенд-платформ и фреймворков (Node.js, ASP.NET Core, Laravel, Ruby on Rails и др.), в которых рассматриваются CRUD-операции и лучшие практики синхронизации Scheduler с базой данных.
Что дальше
Если вы только начинаете, действуйте следующим образом:
- Ознакомьтесь с руководством по началу работы для выбранного вами фронтенд-фреймворка или чистого JavaScript.
- Настройте заголовок, представления, шаблоны и поведение при редактировании через Lightbox.
- Подключите необходимые расширения, например повторяющиеся события, Timeline/Units (в версии PRO), Quick Info или подсказки.
- Подключитесь к бэкенду, настройте интеграцию с сервером и эндпоинты приложения для работы с событиями.
- Изучите руководства и справочник по API для более глубокой настройки, включая шаблоны, события и расширения.
Если вы уже используете DHTMLX Scheduler и переходите с более ранней версии, смотрите What's New для заметок о выпусках и обзоре последних функций и миграционных гайдов.