切换月份时FullCalendar日期数字重复问题求助

问题描述 #

使用FullCalendar时，切换月份（如从11月到12月）出现以下异常：

• 部分日期数字重复显示（如2929、3030、3131）
• 新月份开头出现11、22、33、44这类异常数字

排查方向与解决方案 #

1. 移除自定义CSS干扰 #

日期重复最常见的诱因是自定义CSS导致日期元素叠加或旧DOM未被正确清除：

• 临时注释所有针对FullCalendar的自定义样式（如.fc-day、.fc-daygrid-day-number相关的定位、padding、overflow属性），测试切换月份是否恢复正常。
• 若恢复正常，重点检查是否设置了position: relative未清除旧元素，或overflow: visible导致数字叠加，调整CSS避免元素重叠。

2. 修复标题修改逻辑 #

你的代码中手动修改标题的逻辑会干扰FullCalendar的自动渲染，移除以下代码：

// 移除这段冗余的标题修改代码
datesSet: function(dateInfo) {
    console.log("datesSet", dateInfo);
    let newTitle = dateInfo.view.title;
    $('.fc-toolbar-title').text(newTitle);
},

FullCalendar已通过titleFormat: { month: 'long' }配置标题格式，无需手动修改，重复操作会触发不必要的DOM更新，导致日期元素重复渲染。

3. 优化初始化选中逻辑 #

原代码中手动添加选中类的逻辑可能与FullCalendar渲染流程冲突，改用内置回调实现初始选中：
修改后的完整JavaScript代码：

// FullCalendar Datepicker
$(function () {
    let el = document.getElementById('datepicker');

    if (!el) {
        return;
    }

    let dateRange = parseInt(el.dataset.range);
    const today = new Date();
    const max = new Date();
    max.setDate(today.getDate() + dateRange);

    function selectDate(date, dayElement) {
        $('#moveInDate').val(date.toISOString().split('T')[0]);
        clearSelectedDates();
        if (dayElement) dayElement.classList.add('selected');
    }

    function clearSelectedDates() {
        document.querySelectorAll('.fc-day.selected').forEach(selected => {
            selected.classList.remove('selected');
        });
    }

    let calendar = new Calendar(el, {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        height: 650,
        titleFormat: { month: 'long' },
        headerToolbar: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        validRange: {
            start: today,
            end: max
        },
        dateClick: function (info) {
            selectDate(info.date, info.dayEl);
        },
        // 在日历渲染完成后自动选中今天
        datesSet: function() {
            const todayEl = document.querySelector('.fc-day-today');
            if (todayEl) {
                selectDate(today, todayEl);
            }
        }
    });

    calendar.render();
});

4. 升级FullCalendar版本 #

若上述方案无效，检查当前使用的FullCalendar版本是否存在已知渲染Bug，建议升级到最新稳定版（如v6.x），旧版本在月份切换时可能存在DOM复用逻辑的问题。

补充说明 #

HTML结构无需修改，保持原有即可：

<div class="my-8 max-w-[700px] mx-auto" id="datepicker" data-range="<?= $tenant->get_location()->get('moveOutDateRange') ?>"></div>

<input type="hidden" id="moveInDate" name="moveInDate">

内容的提问来源于stack exchange，提问作者Luigi Battaglioli