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

Posted 2023-02-19

【中文标题】如何在 FullCalendar DayGrid 视图中更改事件元素的大小？

【英文标题】：How to change size of event element in FullCalendar DayGrid View?

【发布时间】：2020-10-07 15:34:01

【问题描述】：

在我的 FullCalendar 渲染中，我使用 dayGrid 视图来创建时间表。当使用事件填充此日历视图（日程安排）时，每个事件的高度相同，无论事件的持续时间如何。我想根据事件的持续时间来放大或缩小事件，类似于 FullCalendar 演示为其他日历视图显示的内容。这可以使用 dayGrid 视图来实现吗？

我的日历：

FullCalendar 所需的样式：

【问题讨论】：

不，你不能那样做。与 timeGrid 不同，dayGrid 没有时间概念，因此没有垂直轴可以将事件拉伸到正确的长度。它仅用作本月的高级概述。如果您使用 MS Outlook 的日历或 Google 日历，您会发现他们在月视图中也采用了非常相似的方法。如果事件在这些视图中被拉伸到它们的真实长度，它很快就会变得非常大、杂乱和笨拙，因为涉及的天数和带有行的网格系统。它看起来很可怕而且难以阅读。

如果人们想要更多详细信息，他们可以深入查看周/日视图 - 您可以在 fullCalendar 标题中提供按钮以允许这样做，您也可以这样做，如果他们点击特定的一天，它也会切换到当天的详细视图。

【参考方案1】：

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

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

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

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

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

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
            
]

【参考方案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)