How to load timeline sections dynamically

I’m realizing a room booking system. The calendars below the mini calendar represent the rooms. I hope the sections in timeline view also represent the rooms.
However, the rooms could be fetched only when the events were fetched. In this situation, the calendar could be added by the method addCalendar(). How could the sections be updated?

Thx

Hello,
You can try using the setConfig method to achieve that. It might look like this:

const sections = [
    // ...
];

const sections2 = [
    // ...
];

const calendarConfig = { 
    views
};

const eventCalendarInstance = new eventCalendar.EventCalendar('#root', {
    events,
    mode: 'timeline',
    config: calendarConfig,
    date: new Date('2024-02-28T00:00:00'),
});

function changeSections() {
    calendarConfig.views = calendarConfig.views.map((view) =>
        view.id === "timeline"
            ? {
                ...view,
                config: {
                    ...view.config,
                    sections: sections2
                }
            }
            : view
    );

    eventCalendarInstance.setConfig({ config: calendarConfig });
    eventCalendarInstance.setMode({ value: "day" });
    eventCalendarInstance.setMode({ value: "timeline" });
}

Please see an example: DHTMLX Snippet Tool
Unfortunately, for now, the sections only update when the view is refreshed, so I’ve temporarily used the setMode method.

Thanks for your reply. It works.
Since I encountered some other issues, I witched back to dhxScheduler.

1 Like