~~~
Scheduler won't be correctly displayed in this case, because "scheduler_here" is set to 100% of its parent, and the size of its parent is not specified.
If you use relative sizes (%, percents) for the *.dhx_cal_container* element, make sure that its parent element also has some height set. Otherwise, the resulting height might be zero and scheduler won't be displayed.
Or, you can use different units for the main scheduler div sizes. The following elements will have expected sizes regardless of the styles of outer elements:
~~~html
~~~
or:
~~~html
~~~
### Scheduler autoresizing
The **container_autoresize** extension for dhtmlxScheduler alters the default resizing behavior of the scheduler. By default, dhtmlxScheduler automatically resizes to fit its container and uses internal scrollbars to make all data accessible within the fixed size of the container.
When the **container_autoresize** extension is enabled, Scheduler dynamically resizes itself to fit all of its content. It means that Scheduler will expand in height and/or width to display all events and data without the need for internal scrollbars.
This behavior ensures that all the content is visible without scrolling within the scheduler, making it ideal for use cases where complete visibility of the scheduler content is required without manual scrolling.
#### Usage
To enable the **container_autoresize** extension, include the extension in your scheduler setup as follows:
~~~js
scheduler.plugins({
container_autoresize: true
});
~~~
[Autoresizing the scheduler container](https://docs.dhtmlx.com/scheduler/samples/03_extensions/28_container_autoresize.html)
This simple configuration change will activate the **container_autoresize** behavior, allowing Scheduler to adjust its size based on the content it contains.
#### Handling headers with container_autoresize
When the **container_autoresize** extension is activated, Scheduler adjusts its size to fit all the content. This may result in Scheduler exceeding the screen size, which will cause an outer container or the page scrollbar appearing.
In this mode scrolling the page will also scroll the navigation and time headers, making them no longer visible when the page is scrolled down. While this is usually the intended behavior, there are scenarios where you may want the headers to remain fixed. This can be achieved with some additional code and styles.
To keep the headers fixed, you can use the sticky position along with some additional styles, for example:
~~~js
~~~
Additionally, you need some JavaScript to ensure the correct top position of the sticky time scale, positioning it just below the navigation panel.
Since the navigation panel is flexible and can adjust its height based on other styles and content, you need to dynamically calculate its height and apply it as the top coordinate for the header, as follows:
~~~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`;
}
});
~~~
Check the complete demo in the snippet below:
**Related sample** [Container autoresize and sticky header](https://snippet.dhtmlx.com/syo8wm9s)
## Making Scheduler responsive
When you initialize Scheduler via [the header configuration property](#initializing-scheduler-via-header-config) you'll be able to choose the header structure that fits the screen size of the client.
It will also apply certain styles which will make elements and font sizes responsive on small screens.
You can find more details in a separate article: [Mobile Responsive Scheduler](guides/touch-support.md).
## Import files into ES6/7 and TypeScript apps
Use the following command to import files:
~~~js
import { scheduler } from 'dhtmlx-scheduler';
~~~
For the Commercial, Enterprise or Ultimate version the command looks like this:
~~~js
import { scheduler, Scheduler } from 'dhtmlx-scheduler';
~~~
## Using Scheduler with Vite
If you use Vite in your project, the following setting is required for the **vite.config.js** file to ensure that Scheduler is correctly included into the app:
~~~js title="vite.config.js"
optimizeDeps: {
include: [
'dhtmlx-scheduler',
]
}
~~~
Include files into a RequireJS-based app
-------------------------------------------
To include dhtmlxScheduler files into a RequireJS-based app, you need to follow the logic shown in the example below:
~~~js
requirejs(["codebase/dhtmlxscheduler"], function(dhx){
var scheduler = dhx.scheduler;
var Scheduler = dhx.Scheduler;// for Enterprise builds
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"
}
]);
});
~~~
The dhtmlxScheduler library will return an object with fields `scheduler` and `Scheduler` (in Commercial, Enterprise or Ultimate versions) - the *scheduler* and *Scheduler* objects described [here](guides/multiple-per-page.md).
:::note
When using Scheduler with custom extensions in RequireJS, you should specify the `shim` config for RequireJS and directly set the dependency of extensions from Scheduler in it.
:::
The example below demonstrates how a custom extension file *custom_tooltip_plugin.js* can be set in the correct way:
~~~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"
}
]);
});
~~~
Check that the module name for any file inside the package is specified as *a relative path inside the 'codebase' folder of the package* plus *the filename*, for instance:
**core library:**
- "dhtmlxscheduler": "./vendor/dhtmlxscheduler/dhtmlxscheduler"