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

Question

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

在版本 4 中，有一个名为

eventRender: function (event, element) {}

的函数可以让我做到这一点。不过5版本好像没有这个功能了

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

Answer 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
        }
        ...

Answer 2

有很多东西需要解释，或者我可以粘贴我如何创建日历并做很少的解释。下面是如何创建日历和修改事件的事件样式的示例。

我使用

eventContent

标签来定义我的自定义 CSS。然而，这会将相同的 CSS 应用于每个事件，但这将为您提供一个起点。

calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap5',
    aspectRatio: 1.8,
    initialView: 'dayGridMonth',
    events: function (fetchInfo, successCallback, failureCallback) {
        $.ajax({
            url: '/Event/JsonListCalendar/',
            type: 'POST',
            dataType: "json",
            data: {
                "Name": $("#Name").val(),
                "Location": $("#Location").val(),
                "StatusId": $("#status").val(),
                "Full": $("#full").val(),
                "OrganizationId": $('#OrganizationId').val(),
                "JsonColumns": JSON.stringify([{ "data": "EventId", "name": "EventId", "searchable": true, "orderable": true, "search": { "value": "", "regex": false } }]),
                "JsonOrder": JSON.stringify([{ "column": 0, "dir": "asc" }]),
                "JsonSearch": JSON.stringify({ "value": "", "regex": false })
            },
            success: function (result) {
                if (result && result.elData) {
                    successCallback(result.elData.map(function (event) {
                        var start = new Date(event['EventDate']);
                        var end = new Date(event['EventDate']);
                        var startTime = event['StartTime'];
                        var endTime = event['EndTime'];
                        return {
                            "id": event["EventId"],
                            "title": event["EventName"],
                            "start": start.toISOString(),
                            "end": end.toISOString(),
                            "allDay": true,
                        };
                    }));
                } else {
                    failureCallback({message: "Something went wrong"});
                }
            },
            error: function (e) {
                failureCallback(e);
            }
        });
    },
    eventColor: 'transparent',
    eventOrder: true,
    eventTextColor: 'var(--bs-black)',
    eventClassNames: 'cursor-pointer',
    eventContent: function (arg) {
        let preEl = document.createElement('pre')
        preEl.style.textAlign = 'center';
        preEl.style.marginBottom = '0';
        preEl.style.fontFamily = "'Helvetica', sans-serif"
        preEl.innerHTML = arg.event.title;

        let arrayOfDomNodes = [preEl];
        return {domNodes: arrayOfDomNodes };
    },
    dayCellClassNames: 'cursor-pointer',
    headerToolbar: {
        start: 'prev',
        center: 'title',
        end: 'next'
    },
    eventClick: function (info) {
        location.href = "@Url.Action("Preview", "Event")/" + info.event.id;
    },
    dateClick: function (info) {
        location.href = "@Url.Action("Add", "Event")?start=" + info.dateStr;
    },
});

输出如下：