Why is the resource not displayed in Fullcalender

Question

I have the above fullcalender script that works but I would like to display the resources (Rooms), what do I need to change in order to do that?

  document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'resourceTimeline' ],
  now: '2019-08-07',
  editable: false, // enable draggable events
  aspectRatio: 1.8,
  scrollTime: '00:00', // undo default 6am scrollTime
  header: {
    left: 'today prev,next',
    center: 'title',
    right: 'month,timeline3Months'
  },
 defaultView: 'timeline3Months',
  views: {
    timeline3Months: {
      type: 'timelineMonth',
      slotDuration: { days: 1 },
      duration: { months: 3 }
   }
 },
buttonText: {
  month: '1 Month',
  timeline3Months: '3 Months',
},     
  resourceLabelText: 'Rooms',
  resources: [
    { id: 'a', title: 'Auditorium A' },
    { id: 'b', title: 'Auditorium B', eventColor: 'green' },
    { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
    { id: 'd', title: 'Auditorium D', children: [
      { id: 'd1', title: 'Room D1' },
      { id: 'd2', title: 'Room D2' }
    ] },
    { id: 'e', title: 'Auditorium E' },
    { id: 'f', title: 'Auditorium F', eventColor: 'red' },
    { id: 'z', title: 'Auditorium Z' }
  ],
  events: [
    { id: '1', resourceId: 'b', start: '2019-08-07T02:00:00', end: '2019-08-07T07:00:00', title: 'event 1', description: 'description for Repeating Event' },
    { id: '2', resourceId: 'c', start: '2019-08-07T05:00:00', end: '2019-08-07T22:00:00', title: 'event 2', description: 'description for Repeating Event' },
    { id: '3', resourceId: 'd', start: '2019-08-06', end: '2019-08-08', title: 'event 3', description: 'description for Repeating Event' },
    { id: '4', resourceId: 'e', start: '2019-08-07T03:00:00', end: '2019-08-07T08:00:00', title: 'event 4', description: 'description for Repeating Event' },
    { id: '5', resourceId: 'f', start: '2019-08-07T00:30:00', end: '2019-08-07T02:30:00', title: 'event 5', description: 'description for Repeating Event' }
  ]



});
calendar.render();

});

I would like to display the calender like this image shows..

Was the answer below helpful to you? If so please vote/accept it. If not please comment so I can improve it. Thanks. — ADyson, Dec 16 '19 at 22:01

score 0 · Answer 1 · answered Dec 06 '19 at 09:14

The "Timeline" and "ResourceTimeline" views are not the same thing. A simple "timeline" view does not use or require resources, it simply displays non-resource-aware events in a timeline style. This is documented here.

To show resources on your timeline, you need to specify your view type as "resourceTimeline" rather than just "timeline". (Also you had specified "timelineMonth" which makes no sense, because you're trying to create a duration of 3 months, whereas "Month" specifies a single month.)

So your custom view definition should look like this:

timeline3Months: {
    type: "resourceTimeline",
    slotDuration: { days: 1 },
    duration: { months: 3 }
}

Demo: https://codepen.io/ADyson82/pen/bGNVbvo

(N.B. You'd also specified your "month" view button wrongly, which is why that button wasn't showing. I corrected that in the demo too, as follows: right: "dayGridMonth,timeline3Months".)

P.S. There's an example of creating a custom resource-enabled timeline view in the docs at https://fullcalendar.io/docs/timeline-view

Why is the resource not displayed in Fullcalender

1 Answers1