Примеры Форум Поддержка
Документация
Start

FAQ

Как открыть примеры

Пакет компонента включает демонстрационное backend-приложение, которое позволяет запускать примеры локально. Для его работы требуется Node.js, и для демонстраций используется хранение данных в памяти, поэтому настройка базы данных не нужна.

Шаги для запуска примеров

1) Используйте демонстрационное Node.js backend-приложение:

  • распакуйте пакет в папку
  • откройте терминал (или cmd, PowerShell)
  • выполните команду npm install
  • выполните команду npm run start
  • откройте http://localhost:9200 в браузере
  • вы увидите индексную страницу, аналогичную нашим онлайн-примерам по адресу https://docs.dhtmlx.com/scheduler/samples/

2) Используйте веб-сервер Apache

  • Установите веб-сервер Apache. Если вы не знаете, как это сделать, рассмотрите вариант с XAMPP.
  • Поместите примеры Scheduler в корневую директорию документов Apache (xampp/htdocs, если используете XAMPP).
  • Запустите веб-сервер Apache, затем откройте примеры по адресу http://localhost/yourfolder.

3) Используйте встроенный в вашу IDE сервер разработки

Некоторые среды разработки предоставляют встроенный сервер разработки, например: https://www.jetbrains.com/help/webstorm/creating-local-server-configuration.html.
Проверьте, поддерживает ли ваша IDE что-то подобное — встроенно или через плагины.

Почему это необходимо

Некоторые примеры загружают данные из JSON-файлов через AJAX (xhr). Чтобы это работало, пример должен открываться через веб-сервер.

Открытие примера двойным щелчком мыши запускает его как файл, и браузеры блокируют AJAX-запросы в этом режиме. В результате компонент не может загрузить файлы данных, и вы увидите всплывающее окно Invalid data в правом верхнем углу.

Чтобы убедиться в этом, посмотрите на URL в браузере. Если он начинается с file:///, например:

file:///D:/www/scheduler-eval/samples/20_multiple/01_basic.html

то загрузка файлов данных работать не будет.

Открытие примера через веб-сервер будет выглядеть так (протокол http:// может быть опущен):

http://localhost/scheduler-eval/samples/20_multiple/01_basic.html

Scheduler отображается некорректно

Если Scheduler неправильно отображается на странице, проверьте CSS-стили его контейнера — ему обязательно должен быть задан валидный размер в пикселях или процентах.

  • Если размер задан в процентах, убедитесь, что родительскому контейнеру также задана высота.
  • Если Scheduler размещён непосредственно внутри body, примените этот CSS для корректной работы процентов:
html, body{
    margin:0px;
    padding:0px;
    height:100%; /*обязательно*/
    overflow:hidden;
}

Scheduler некорректно отображается в Internet Explorer

Если Scheduler неправильно отображается только в Internet Explorer, проверьте, что на вашей странице используется полный DOCTYPE. Scheduler корректно работает в стандартных режимах IE, но не предназначен для работы в quirks mode.

Например, DOCTYPE для HTML5:

<!DOCTYPE html>

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

Начальный вид, отображаемый в Scheduler, задаётся при инициализации через метод init. Однако шаблоны, используемые кастомным видом, могут быть не полностью обработаны к этому моменту, из-за чего инициализация может завершиться с ошибкой.
Чтобы избежать этого, создавайте кастомные виды внутри обработчика события onTemplatesReady, которое происходит после полной обработки всех шаблонов:

scheduler.attachEvent("onTemplatesReady",function(){
    //разместите здесь код создания кастомного вида
});
 
scheduler.init(container, date, "custom view name");

Ошибка разбора XML при загрузке данных через PHP-скрипт

Часто это происходит, если серверный скрипт выводит пробелы перед XML, что вызывает ошибку.

Убедитесь, что ни в одном из подключаемых файлов вашего connector-скрипта нет пробелов вне тегов
<?php и ?>.

Как установить 12-часовой формат времени (не военный)?

По умолчанию Scheduler использует 24-часовой формат (военное время), отображая время, например, как 13:00.
Чтобы переключиться на 12-часовой формат и отображать время как 1:00 PM, установите свойство hour_date:

scheduler.config.hour_date = "%g:%i%a"; scheduler.init('scheduler_here', new Date(), "month");

События, длящиеся менее часа, выглядят так же, как и часовые события

По умолчанию высота одного часа (scale unit) — 44px, а минимальная высота блока события — 40px (в material skin). Поэтому события на 15 минут и на час выглядят одинаково.

Чтобы настроить размер событий в соответствии с масштабом, доступно несколько вариантов. Подробнее см. в статье Изменение размера шкалы и блоков событий.

Фон грид календаря и шкала времени не совпадают

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

Такое поведение ожидаемо и на данный момент не может быть исправлено. Макет календаря гарантированно отображается корректно при 100% (стандартном) масштабе, но при других масштабах некоторые элементы могут смещаться из-за масштабирования браузера.

Ограничения масштабируемости Scheduler и максимальное количество событий

Масштабируемость Scheduler зависит от нескольких факторов.

В Timeline view количество строк сильно влияет на скорость отрисовки. Отображение сотен секций Timeline может вызывать заметные задержки, в зависимости от настроек.

Для работы с большими объёмами данных включите режим динамической загрузки. В этом режиме Scheduler загружает только те события, которые нужны для отображения (AJAX-запросы включают диапазон дат для фильтрации на сервере).

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

Например, Day или Week views не подходят для отображения очень большого количества событий, так как события показываются в колонках с ограниченной шириной.

В целом, общее количество событий редко становится проблемой. Однако если у вас много секций Timeline (например, 200 строк), может потребоваться оптимизация кода для сокращения времени перерисовки.

Scheduler ничего не показывает

Две типовые ситуации:

1. Вы настроили backend API вручную или по нашим инструкциям, но Scheduler не отображает событий.

или

2. Возникают проблемы с сохранением изменений на сервер.

Обратитесь к статье Устранение проблем с интеграцией Backend для диагностики этих проблем.

В правом верхнем углу появляется сообщение об ошибке

Эти сообщения появляются, когда компонент сталкивается с проблемами.

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

Если вы хотите отключить эти сообщения перед публикацией приложения для пользователей, используйте настройку show_errors:

scheduler.config.show_errors = false;
Наверх