如何自定义全日历js的listMonth视图

问题描述 投票:0回答:0
calendar = new FullCalendar.Calendar(calendarEl, {
                height: 552,
                headerToolbar: {
                    left: '',
                    center: 'prev today title,next',
                    right: 'dayGridMonth,timeGridWeek,resourceTimeGridDay,listMonth'
                },
                
                dayMaxEvents: true,
                navLinks: true, // can click day/week names to navigate views
                editable: false,
                selectable: true,
                allDaySlot: false,
                customRender: true,
                titleFormat: { // will produce something like "Tuesday, September 18, 2018"
                    day: 'numeric',
                    month: 'short',
                    year: 'numeric'
                },
                refetchResourcesOnNavigate: true,
                businessHours: getBusinessHours(),
                resources :"{{route('front.appointment.get_appointment_dashboard')}}?resouce=1",
                events: url,
                eventDidMount: function(el) {
                    addBtn();
                },

                eventContent: function(info) {

                    if (info.view.type == "listMonth") {
                        return '';
                    }
                    if (info.view.type == 'dayGridMonth') {
                        if (info.event.allDay == false) {
                            return {
                                html: '<div style=""><div class="fc-daygrid-event-dot change_color-'+info.event.extendedProps.resourceId+'" id="fc-daygrid-'+info.event.extendedProps.resourceId+'" style="border-color: ' +
                                    info.event.borderColor + ';">  </div> <div class="fc-event-time">' +
                                    info.event.extendedProps.time + '</div><div class="fc-event-title">' + (info.event.extendedProps.customer || 'Empty') + '&nbsp; &nbsp;' + (info.event.extendedProps.LastName || '')+ ' </div> </div>'
                            }
                        } else {
                            return {

                                html: '<div class="fc-event-main" style="color: ' + info.textColor +
                                    ';"><div class="fc-event-main-frame"><div class="fc-event-title-container"><div class="fc-event-title fc-sticky">' +
                                    (info.event.extendedProps.customer || 'Empty') +
                                    ' </div></div></div></div><div class="fc-event-resizer fc-event-resizer-end"></div>'
                            }
                        }

我想制作一个有标题和边框的表格以及我在该表格中的数据

fullcalendar
© www.soinside.com 2019 - 2024. All rights reserved.