在事件渲染过程中如何修改FullCalendar上每个事件的css样式？

Posted 2023-05-08

【中文标题】在事件渲染过程中如何修改FullCalendar上每个事件的css样式？

【英文标题】：How to modify the css style of each event on FullCalendar during the event rendering?

【发布时间】：2022-01-08 13:45:34

【问题描述】：

我正在使用FullCalendar v5 插件在日历上显示事件。我正在尝试通过添加一些样式来找到改变元素的方法。

在版本 4 中，有一个名为 eventRender: function (event, element) 的函数可以让我做到这一点。但是，该功能似乎在版本 5 中不存在。

如何FullCalendar v5在渲染过程中操作事件元素？

【参考方案1】：

如果您查看从 v4 迁移到 v5 的文档，您会找到答案。

https://fullcalendar.io/docs/upgrading-from-v4

eventRender：改用新的事件渲染钩子

所以使用v5，最适合你的是使用eventDidMount

例如

document.addEventListener('DOMContentLoaded', function () 
    var calendarEventsEl = document.getElementById('calendar-events');

    calendarEvents = new FullCalendar.Calendar(calendarEventsEl, 
        headerToolbar: false,
        contentHeight: 300,
        ...
        eventDidMount: function (arg) 
          // customize an event element here
        
        ...