Search code examples
fullcalendarfullcalendar-4fullcalendar-scheduler

Full Calendar resourceTimeGrid layout question

I am implementing Fullcalendar using the following code (WIP) This puts the events inside the calendar the correct way. But by Default the calender uses the starting time to position the event blocks inside the calendar. I would like the implement my events like a Trello board, so basically they all start on top in the same row. I've added a picture for clearing up the idea.

enter image description here

    let calendar = new Calendar(calendarElement, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      locale: nlLocale,
      timeZone: "UTC",
      allDaySlot: false,
      plugins: [ 
        resourceTimeGridPlugin,
      ],
      initialView: 'resourceTimeGridDay',
      resources: `${window.location.href}/getRoomsJSON`,
      eventDisplay: 'block',
      events: [
        { id: '1', resourceId: '2', start: '2020-12-21T02:00:00', title: 'event 1' },
        { id: '2', resourceId: '2', start: '2020-12-21T05:00:00', title: 'event 2' },
        { id: '3', resourceId: '3', start: '2020-12-21T03:00:00', title: 'event 4' },
        { id: '4', resourceId: '4', start: '2020-12-21T00:30:00', title: 'event 5' }
      ],
      contentHeight: 'auto',
      eventTimeFormat: { // like '14:30:00'
        hour: '2-digit',
        minute: '2-digit',
        meridiem: false
      }
    });
Solution

  • I had to use resource-daygrid instead of resource-timegrid This gave me a layout very simular to the image above. Next I applied normal styling and voilà we have a identical calendar.