如何自定义FullCalendar.js的listMonth视图为带边框表格

直接修改eventContent回调中针对listMonth视图的逻辑，返回包含事件数据的表格结构，同时搭配CSS实现表头和边框样式，以下是完整的修改方案：

修改后的FullCalendar初始化代码 #

calendar = new FullCalendar.Calendar(calendarEl, {
    height: 552,
    headerToolbar: {
        left: '',
        center: 'prev today title,next',
        right: 'dayGridMonth,timeGridWeek,resourceTimeGridDay,listMonth'
    },
    
    dayMaxEvents: true,
    navLinks: true, // 可点击日期/周名称切换视图
    editable: false,
    selectable: true,
    allDaySlot: false,
    customRender: true,
    titleFormat: { // 格式示例: "周二, 9月 18, 2018"
        day: 'numeric',
        month: 'short',
        year: 'numeric'
    },
    refetchResourcesOnNavigate: true,
    businessHours: getBusinessHours(),
    resources : "{{route('front.appointment.get_appointment_dashboard')}}?resource=1", // 修正拼写错误：resouce → resource
    events: url,
    eventDidMount: function(el) {
        addBtn();
    },

    eventContent: function(info) {
        // 处理listMonth视图，返回带表头和边框的表格
        if (info.view.type == "listMonth") {
            return {
                html: `
                    <table class="custom-list-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>客户姓名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>${info.event.extendedProps.time || '全天'}</td>
                                <td>${(info.event.extendedProps.customer || 'Empty')} ${info.event.extendedProps.LastName || ''}</td>
                            </tr>
                        </tbody>
                    </table>
                `
            };
        }
        
        // 保留原有的dayGridMonth视图渲染逻辑
        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>'
                }
            }
        }
    }
});

// 渲染日历
calendar.render();

配套CSS样式（实现边框和表头样式） #

/* 自定义listMonth视图表格样式 */
.custom-list-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}

.custom-list-table th, .custom-list-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.custom-list-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

注意事项 #

• 表格字段可根据实际需求调整，比如添加资源ID、事件描述等
• 样式可根据项目设计规范修改颜色、间距、字体大小等
• 原代码中resources参数的resouce拼写错误已修正为resource，避免请求接口出错

内容的提问来源于stack exchange，提问作者zahoor elahi