事件的自定义视图

Question

我正在使用 fullcalendar 使用列表视图显示事件。 Fullcalendar 使用表格来呈现事件列表。我在标题、开始和结束期间使用自定义属性，因此事件表在移动设备上不太可读。我更喜欢使用其他 HTML 元素，以便与 flexbox 一起使用，我可以根据需要处理事件属性。 在 fullcalendar v5 中，建议使用实现我的目标 (https://fullcalendar.io/docs/custom-view-with-js-demo) 的自定义视图，但我不知道如何自定义示例，以便我可以在标题中使用周和月过滤器而不是当前，上一天和下一天按钮。有什么建议么？ 这是我目前使用的代码

document.addEventListener('DOMContentLoaded', function() {
        const { sliceEvents, createPlugin, Calendar } = FullCalendar

        const CustomViewConfig = {

            classNames: ['custom-view'],

            content: function(props) {
                let segs = sliceEvents(props, true); // allDay=true
                let html =
                    '<div class="view-title">' +
                    props.dateProfile.currentRange.start.toUTCString() +
                    '</div>' +
                    '<div class="view-events">' +
                    segs.length + ' events:' +
                    '<ul>' +
                    segs.map(function(seg) {
                        return seg.def.title + ' (' + seg.range.start.toUTCString() + ')'
                    }).join('') +
                    '</ul>' +
                    '</div>'

                return { html: html }
            }

        }

        const CustomViewPlugin = createPlugin({
            views: {
                custom: CustomViewConfig
            }
        })

        let calendarEl = document.getElementById('calendar');
        let calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [CustomViewPlugin],
            initialView: 'custom',
            timeZone: 'UTC',
      
            firstDay: 1,
            events: ... // not using the real array here to make the code shorter for SO
        });

        calendar.render();
    });