Full Calendar resourceTimeGrid 布局问题

如何解决Full Calendar resourceTimeGrid 布局问题

我正在使用以下代码 (WIP) 实现 Fullcalendar 这以正确的方式将事件放入日历中。但默认情况下，日历使用开始时间来定位日历内的事件块。 我希望像 Trello 板一样实现我的事件，所以基本上它们都在同一行的顶部开始。我添加了一张图片来澄清这个想法。

    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',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
      }
    });

解决方法

我不得不使用 resource-daygrid 而不是 resource-timegrid 这给了我一个与上图非常相似的布局。接下来我应用了正常的样式，瞧，我们有一个相同的日历。