如何更改 FullCalendar DayGrid 视图中事件元素的大小？

Question

在我的 FullCalendar 渲染中，我使用 dayGrid 视图来创建一个时间表。当用事件填充此日历视图（日程表）时，每个事件都是相同的高度，而不管事件的持续时间。我想根据事件的持续时间使事件变大或变小，类似于 FullCalendar 演示为其他日历视图显示的内容。使用 dayGrid 视图可以实现吗？

我的日历：

FullCalendar 所需样式：

Answer 1

我最终找到了实现目标的方法。日历呈现的 CSS 样式可以直接在 html 页面中修改，使用：

<style>
   .fc-day-grid-event > .fc-content {
       white-space: normal;
   }
</style>

这允许事件标题的文本换行。在不修改此样式的情况下，事件文本（标题）只会剪掉比事件框宽度更长的任何内容。完成此样式后，我只需将换行符 ('\n') 插入 html 即可扩大框的大小。因为我是从数据库控制我的事件，所以很容易简单地将换行符添加到与事件所需大小对应的标题字符串中。

这是我的日历之前的样子：

这里有一些示例事件来重新创建图像：

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]

这是使用我的解决方案时日历的样子：

以及对该解决方案所需事件的简单修改：

events: [
            {
            id: 'event1',
            title: 'Event 1- 5h' + '\n\n\n\n\n',
            start: '2020-06-16',
            displayEventTime: false,
            editable: true,
            allDay: true
            },

            {
              id: 'event2',
              title: 'Event 2- 2h' + '\n\n',
              start: '2020-06-16',
              displayEventTime: false,
              editable: true,
              allDay: true
            },

            {
                id: 'event3',
                title: 'Event 3- 1h',
                start: '2020-06-16',
                displayEventTime: false,
                editable: true,
                allDay: true
            }
]

Answer 2

在 v5 中，在 CSS 文件中找到 .fc-h-event 并添加高度选项。这是我的：

.fc-h-event { /* allowed to be top-level */
    display: block;
    height: 70px !important;
    border: 2px solid #3788d8;
    border: 2px solid var(--fc-event-border-color, #3788d8);
    background-color: #3788d8;
    background-color: var(--fc-event-bg-color, #3788d8)
}

如何更改 FullCalendar DayGrid 视图中事件元素的大小？

How to change size of event element in FullCalendar DayGrid View?

fullcalendar

fullcalendar-4