javascript - Custom view for events

Question

I am using fullcalendar to display events using list view. Fullcalendar uses a table to render the list of events. I am using custom properties in addiction to title, start and end period therefore the event table is not very readable on mobile devices. I would prefer to use other HTML elements so that, together with flexbox, I can dispose event properties as needed. In fullcalendar v5, it is suggested to use a custom view which fullfil my goals (https://fullcalendar.io/docs/custom-view-with-js-demo) but I don't know how to customise the example so that I can use week and month filters in the header instead of current, prev and next day button. Any suggestions? This is the code I am using so far

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();
    });

question from:https://stackoverflow.com/questions/65881295/custom-view-for-events

Answer 1

Waitting for answers