We seem to have an alignment issue with events on the timeline view where they don’t seem to stay in alignment with the dates at the top of the screen. See screenshot, particularly the week 1 of the October school holidays that should align with 26 Sep @ 14:00 to 3rd Oct @ 10:00, but it clearly runs from Friday to Friday.
It seems to be more an issue the further down the timeline you get (we have it showing approx. 13 months) It seems to be in alignment at the start but just doesn’t keep up with the scale along the top.
This is my configuration
Promise.all([
restProvider.getEvents(),
restProvider.getCalendars()
]).then(([events, calendars]) => {
event_calendar = new eventCalendar.EventCalendar(“#root”, {
events,
sidebar: {show: null},
date: new Date(“<yesterday’s date>”),
calendars,
config: {
dragCreate: false,
dragResize: false,
dragMove: false,
editorOnDblCkicl: false,
readonly: true,
viewControl: “none”,
highlightReadonly: false,
dateClick: false,
views: [{
id: “timeline”,
label: “Timeline View”,
layout: “timeline”,
unassignedCol: false,
config: {
colsCount: Math.round(((dateFns.addMonths(new Date(), 13).moveToLastDayOfMonth() - new Date())/1000/60/60/24))+2,
getBounds: (date) => {
return [new Date(“”), dateFns.addMonths(new Date(), 13).moveToLastDayOfMonth().addDays(1)];
},
getNext: null,
getPrev: null,
header: [
{ unit: “month”, step: 1, format: “MMMM” },
{ unit: “day”, step: 1, format: “EEEEEE d” },
],
sections: [
{
id: “”,
label: “”
},
]
},
}],
},
mode: "timeline",
templates: {
popup: ({ event, calendar }) => {
const start_date = format(event.start_date, "do MMM @ HH:mm");
const end_date = format(event.end_date, "do MMM @ HH:mm");
return `
<div>
<div class="wx-event-calendar-popup_wrapper svelte-l4f5w6">
<span>
<div class="wx-event-calendar-header svelte-l4f5w6">
<div>
<span class="wx-event-calendar-title svelte-l4f5w6">${event.status}</span>
</div>
<i class="wxi-close wx-event-calendar-close svelte-l4f5w6"></i>
</div>
</span>
<div class="wx-event-calendar-info svelte-l4f5w6">
<div class="wx-event-calendar-name svelte-l4f5w6">
<p>${event.text}</p>
<button data-id="${event.id}" data-entityname="${event.entity}" onClick="launchModal(this);" class="btn btn-primary">Open</button>
</div>
<div class="wx-event-calendar-date svelte-l4f5w6">
<div>${event.details}</div>
<div><b>Date:</b> ${start_date} - ${end_date}</div>
</div>
</div>
</div>
</div>`;
}
}
});
event_calendar.api.setNext(restProvider);