~~~
В этом случае планировщик не отобразится корректно, потому что "scheduler_here" установлен на 100% от родительского элемента, но у родителя не задан размер.
Если вы используете относительные размеры (проценты) для элемента *.dhx_cal_container*, убедитесь, что у его родителя также задана высота. В противном случае вычисленная высота может быть равна нулю, и планировщик не отобразится.
В качестве альтернативы, вы можете использовать другие единицы измерения для размеров основного div планировщика. Следующие примеры будут иметь ожидаемый размер независимо от стилей внешних элементов:
~~~html
~~~
или:
~~~html
~~~
### Автоматическое изменение размера планировщика {#containerautoresizing}
Расширение **container_autoresize** изменяет стандартное поведение изменения размера планировщика. Обычно dhtmlxScheduler подстраивается под размер своего контейнера и отображает внутренние полосы прокрутки для доступа ко всем данным внутри фиксированного размера контейнера.
С включённым расширением **container_autoresize** планировщик динамически подстраивает свой размер под всё содержимое. Это значит, что он расширяется по высоте и/или ширине, чтобы отобразить все события и данные без внутренних полос прокрутки.
Это гарантирует видимость всех данных без необходимости прокручивать содержимое внутри планировщика, что полезно, когда требуется полный обзор содержимого без ручной прокрутки.
#### Использование
Чтобы активировать расширение **container_autoresize**, включите его в настройках планировщика следующим образом:
~~~js
scheduler.plugins({
container_autoresize: true
});
~~~
[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html)
Эта простая настройка активирует функцию **container_autoresize**, позволяя планировщику изменять размер в зависимости от содержимого.
#### Работа с заголовками при использовании container_autoresize
Когда включено расширение **container_autoresize**, Scheduler автоматически изменяет размер, чтобы вместить всё своё содержимое. Иногда это приводит к тому, что Scheduler выходит за пределы экрана, из-за чего на странице или во внешнем контейнере появляются полосы прокрутки.
В этом режиме прокрутка страницы также смещает панель навигации и временные заголовки, поэтому они не остаются видимыми при прокрутке вниз. Обычно такое поведение подходит, но бывают случаи, когда требуется закрепить заголовки. Для этого понадобится добавить некоторые стили и скрипты.
Чтобы закрепить заголовки, используйте CSS-свойство sticky вместе с дополнительными стилями, например:
~~~js
~~~
Кроме того, потребуется JavaScript, чтобы корректно задать верхнюю позицию для фиксированной временной шкалы, разместив её сразу под панелью навигации.
Поскольку высота панели навигации может меняться в зависимости от стилей и содержимого, её высоту нужно вычислять динамически и применять как top для заголовка, например так:
~~~js
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`;
}
});
~~~
Полный пример можно посмотреть в сниппете ниже:
**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s)
## Адаптивность Scheduler {#makingschedulerresponsive}
Когда Scheduler инициализируется с помощью [свойства header конфигурации](#initializingschedulerviaheaderconfig), можно выбрать макет заголовка, подходящий для размера экрана клиента. Также применяются определённые стили, которые позволяют элементам и шрифтам хорошо адаптироваться к небольшим экранам.
Больше информации доступно в отдельной статье: [Мобильная адаптивность Scheduler](guides/touch-support.md).
## Импорт файлов в приложения на ES6/7 и TypeScript {#importfilesintoes67andtypescriptapps}
Используйте следующую команду для импорта файлов:
~~~js
import { scheduler } from 'dhtmlx-scheduler';
~~~
Для Commercial, Enterprise или Ultimate версий импорт выглядит так:
~~~js
import { scheduler, Scheduler } from 'dhtmlx-scheduler';
~~~
## Использование Scheduler с Vite {#usingschedulerwithvite}
Если ваш проект использует Vite, добавьте следующую настройку в файл **vite.config.js**, чтобы Scheduler корректно подключался к вашему приложению:
~~~js title="vite.config.js"
optimizeDeps: {
include: [
'dhtmlx-scheduler',
]
}
~~~
## Добавление файлов в приложение на RequireJS {#includefilesintoarequirejsbasedapp}
-------------------------------------------
Чтобы добавить файлы dhtmlxScheduler в приложение на RequireJS, используйте следующий пример:
~~~js
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*, описанным [здесь](guides/multiple-per-page.md).
:::note
При использовании Scheduler с пользовательскими расширениями в RequireJS обязательно указывайте конфигурацию `shim` для RequireJS и объявляйте зависимости расширений от Scheduler.
:::
Ниже приведён пример правильного подключения пользовательского расширения *custom_tooltip_plugin.js*:
~~~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"