79477646

Date: 2025-03-01 13:36:46
Score: 2
Natty:
Report link

@Tiny. This is the screenschot and link to codepen: https://codepen.io/Michel-S/pen/WbNRzGm?editors=0110

enter image description here

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; } 
Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Tiny
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Mitch