@Tiny. This is the screenschot and link to codepen: https://codepen.io/Michel-S/pen/WbNRzGm?editors=0110
Here you can see tat the second (double) appointment for Jim is displayed in the wrong resource-row (Sarah).
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
locale: 'nl',
initialView: 'resourceTimelineDay',
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resources: [ {id: 'a', title: 'Jim' },
{id: 'b', title: 'Sarah' },
{id: 'c', title: 'Tony' } ],
events: [ {id: '1', resourceId: 'a', title: 'Appmnt1', start: '2025-03-01T09:00', end: '2025-03-01T11:00' },
{id: '2', resourceId: 'a', title: 'Appmnt2', start: '2025-03-01T10:00', end: '2025-03-01T14:00' },
{id: '3', resourceId: 'b', title: 'Appmnt3', start: '2025-03-01T08:00', end: '2025-03-01T10:00' } ],
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
max-height: 250px;
margin: 40px auto;
}
.fc-datagrid-cell-frame[style] { height: 20px !important; }
.fc-timeline-lane-frame { height: 20px !important; }