On a resource timeline monthly view, I’m trying to display some resources and its associated events as shown in the below code block:
Code Block:
export const SchedulerCalendar = () => {
const RESOURCES = [
{ id: 'a', title: 'Auditorium A', eventColor: 'green' },
{ id: 'b', title: 'Auditorium B' },
{ id: 'c', title: 'Auditorium C', eventColor: 'orange' },
];
const INITIAL_EVENTS = [
{
id: '001',
title: 'All-day event',
start: new Date().toISOString().replace(/T.*$/, ''),
resourceId: 'a',
},
{
id: '002',
title: 'Timed event',
start: new Date().toISOString().replace(/T.*$/, '') + 'T12:00:00',
resourceId: 'c',
},
];
return (
<div>
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin, resourceTimelinePlugin]}
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,resourceTimelineMonth',
}}
initialView="resourceTimelineMonth"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={true}
events={INITIAL_EVENTS} // alternatively, use the `events` setting to fetch from a feed
resources={RESOURCES}
/>
</div>
);
};
In the code, I have defined few RESOURCES and INITIAL_EVENTS that are binded to resources and events of the Full Calendar, so the first event is associated with resource ‘a’ & second one with resource ‘c’and I have 2 different views, one is the ‘dayGridMonth’ and the next one is ‘resourceTimelineMonth’ view. So when I try to run this code on my localhost, I’m able to see the events getting painted in both ‘dayGridMonth’ and in resourceTimelineMonth (events + resources) as shown in the below screenshots: and
This works fine as expected.
But when I try to point the same code to one of our real time testing stack, I’m able to see the events on the ‘dayGridMonth’ as expected but on a ‘resourceTimelineMonth’, I’m able to see ONLY the resources and NOT the events getting displayed and this behaviour is more specific when this runs on a Testing stack. I have enclosed the screenshots below for reference: and
Note: The test stack has an hybrid setup where we have both version of Full Calendar, but gets rendered os different pages (separately), that is the javascript (Scheduler v1.10) which is licensed as well as the above code Fullcalendar (V6) (Non-Licensed), Since we are in the phase of converting our application from javascript to React we need to support both the versions for a while. Not sure if this has something to contribute to the above issue but thought of mentioning, Thanks in advance.