How to make a custom two months view with a timeline layout without any grouping by sections

I could make a two months with a timeline layout custom view using this code :

const views: IViewItem[] = [
        { id: "day", label: "Day", layout: "day" },
        { id: "week", label: "Week", layout: "week" },
        { id: "month", label: "Month", layout: "month" },
        {
          id: "2months",
          label: "2 Months",
          layout: "timeline",
          config: {
            step: [1, "day"],
            getBounds: (date: Date) => {
              const start = new Date(date.getFullYear(), date.getMonth(), 1);
              const end = new Date(date.getFullYear(), date.getMonth() + 2, 0);
              return [start, end] as [Date, Date];
            },
            getNext: (date: Date) => new Date(date.getFullYear(), date.getMonth() + 2, 1),
            getPrev: (date: Date) => new Date(date.getFullYear(), date.getMonth() - 2, 1),
            dateTitle: (_: Date, bounds: [Date, Date]) => {
              const opts = { month: "short", year: "numeric" } as const;
              return `${bounds[0].toLocaleDateString(undefined, opts)} — ${bounds[1].toLocaleDateString(
                undefined,
                opts
              )}`;
            },
          },
        },
      ];

      const calendar = new EventCalendar(containerRef.current, {
        mode: "month",
        date: selectedDate,
        events: data,
        config: { views },
      });

I don’t need any groupement by sections on it. As you see I’m not passing any config.sections but I’m still getting them in my calendar : https://i.imgur.com/v6k05AZ.png

I was using the syncfusion calendar before and that was possible as you can see : https://i.imgur.com/NV7VQuP.png

Hello,

Unfortunately, in the Timeline view sections are required. You can try passing an array with a single section, sections: [{ id: "all", label: "" }], but then you need to assign all events to that section so they are visible in the timeline; it can look like this:

const { EventCalendar, dateFns } = eventCalendar;

const locale = eventCalendar.en;
locale.scheduler.Assignees = " ";

const views = [
	{ id: "day", label: "Day", layout: "day" },
	{ id: "week", label: "Week", layout: "week" },
	{ id: "month", label: "Month", layout: "month" },
	{
		id: "two_months",
		label: "2 Months",
		layout: "timeline",
		config: {
			step: [1, "day"],
			sections: [{ id: "all", label: "" }],
			sectionWidth: 15,
			colsWidth: 50,
			colsCount: 61,
			getBounds: (currentDateParameter) => {
				const startDate = dateFns.startOfMonth(currentDateParameter);
				const endDate = dateFns.endOfMonth(dateFns.addMonths(currentDateParameter, 1));
				return [startDate, endDate];
			},
			getNext: (currentDateParameter) => {
				return dateFns.startOfMonth(dateFns.addMonths(currentDateParameter, 2));
			},
			getPrev: (currentDateParameter) => {
				return dateFns.startOfMonth(dateFns.addMonths(currentDateParameter, -2));
			}
		}
	}
];

const eventCalendarInstance = new EventCalendar("#root", {
	mode: "two_months",
	date: new Date('2025-10-01 00:00:00'),
	config: {
        viewControl: "auto",
        views: views
    },
    locale
});

const eventsWithSection = events.map((eventItem) => ({ ...eventItem, section: 'all' }));

eventCalendarInstance.parse({ events: eventsWithSection });

Example: DHTMLX Snippet Tool