How to config the timeline view for a single day

Event Calendar
#1

I hope the timeline only show a single day with 1-hour steps, and for the working hours (say, 8:00-20:00).
The current timeline view shows several days. Even if I set the colsCount property, the number of cols changes, but the hours are still continuous to 21:00 until 0:00 the next day, instead of the next 8:00-20:00.
I tried many, but find no solution.
Thx

#2

Hello,
Please try the following setup:

const views = [
    ...
    {
        id: 'timeline',
        label: 'Timeline',
        layout: 'timeline',
        config: {
            sections,
            getBounds: (date) => {
                return [date.setHours(8, 0, 0, 0), new Date(date.getFullYear(), date.getMonth(), date.getDate(), 20, 0, 0)];
            },
            getNext: (date) => {
                return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1, 8, 0, 0);
            },
            getPrev: (date) => {
                return new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1, 8, 0, 0);
            },
            step: [1, 'hour'],
            header: [
                { unit: 'day', step: 1, format: 'd MMM yyyy' },
                { unit: 'hour', step: 1, format: 'H:mm' },
            ],
            colsCount: 13,
            ...
        },
    },
];

const eventCalendarInstance = new eventCalendar.EventCalendar('#root', {
    ...
    config: { 
        views
    },
    ...
});
  • getBounds: Limits the timeline to show only the working hours (8:00–20:00).
  • getNext and getPrev: Configures navigation to move by single days, starting at 8:00.
  • colsCount: Specifies the number of columns (13) to match the working hours.

Here is an example: DHTMLX Snippet Tool