Full Calendar resourceTimeGrid布局问题

Question

我正在使用以下代码实现 Fullcalendar (WIP) 这会将事件以正确的方式放入日历中。但默认情况下，日历使用开始时间来定位日历内的事件块。我希望像 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', 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
      }
    });

Answer 1

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

Full Calendar resourceTimeGrid布局问题

Full Calendar resourceTimeGrid layout question

fullcalendar

fullcalendar-4

fullcalendar-scheduler