Event 不会在带有 eventRender 的 FullCalendar v5 中呈现。用什么代替？

Question

我正在尝试通过 JSON 数组在 FullCalendar v5 中呈现事件，但我意识到 eventRender 不适用于 v5。那我该怎么做呢？ （我确实知道事件渲染钩子，但不知道如何使用它）

                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var calendarEl = document.getElementById('calendar');
                    <?php
                    include 'config.php';
                    $items = array();
                    $query = mysqli_query($connection, "SELECT * FROM events_table WHERE grade_id = '{$studentGradeId}' ");
                    while ($result = mysqli_fetch_array($query)) {
                        $items[] = array(
                            'title' => $result['event_title'],
                            'start' => date('Y-m-d', strtotime($result['event_date'])),
                        );
                    };
                    ?>
                    var items = <?php echo json_encode($items); ?>

                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        initialView: 'dayGridMonth',
                        headerToolbar: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,dayGridWeek,dayGridDay'
                        },
                        events: items,
                        eventrender: function(event, calendarEl) {
                            calendarEl.find('.fc-title').text(event.title);
                        }

                    });
                    calendar.render();
                });
            </script>

Answer 1

是的。正如你在最后的评论中提到的。 EventRender 不适用于 FullCalendar v5。它被eventDidMount取代。

我已经用最新的代码修改了你的代码。请看一下。

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        <?php
        include 'config.php';
        $items = array();
        $query = mysqli_query($connection, "SELECT * FROM events_table WHERE grade_id = '{$studentGradeId}' ");
        while ($result = mysqli_fetch_array($query)) {
            $items[] = array(
                'title' => $result['event_title'],
                'start' => date('Y-m-d', strtotime($result['event_date'])),
            );
        };
        ?>
        var items = <?php echo json_encode($items); ?>

        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            events: items,
            eventContent: function(info) {
                // Customize the event HTML here
                return { html: '<div class="fc-content">' + info.event.title + '</div>' };
            },
            eventDidMount: function(info) {
                // Add additional functionality or styles to the event element here
                info.el.querySelector('.fc-title').textContent = info.event.title;
            },
            eventWillUnmount: function(info) {
                // Clean up any additional functionality or styles here
                console.log(info.event.title + ' was removed!');
            }
        });
        calendar.render();
    });
</script>