FullCalendar v5：在Today按钮旁添加单选按钮并实现事件切换

问题根源 #

你之前在eventDidMount钩子中创建单选按钮，这个钩子会在每个事件挂载到DOM时触发，日历中有多少个事件就会执行多少次，因此会重复创建单选按钮。必须换一个只执行一次（或视图切换时可控）的时机来添加控件。

解决方案 #

1. 在日历渲染完成后添加单选按钮组，确保只创建一次
2. 默认选中第一个单选按钮，初始化时加载对应事件
3. 绑定单选按钮的切换事件，通过refetchEvents动态更新日历数据

修正后的完整代码 #

var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
    },
    hiddenDays: [0, 6],
    height: 800,
    displayEventTime: false,
    eventDisplay: 'block',
    contentHeight: 780,
    // 动态获取事件：每次refetch时根据选中的单选按钮值加载对应数据
    events: function(info, successCallback, failureCallback) {
        var selectedValue = document.querySelector('input[name="show_carrier_dates"]:checked').value;
        var events = getCalendarData(parseInt(selectedValue));
        successCallback(events);
    }
});

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

// 给表头添加单选按钮组
function addRadioButtons() {
    // 先检查是否已添加过，避免重复创建
    if (document.querySelector('.fc-radio-group')) return;

    // 定位到Today按钮所在的工具栏区块（left区域）
    var toolbarChunk = calendarEl.querySelector('.fc-toolbar-chunk:first-child');
    if (!toolbarChunk) return;

    // 创建单选按钮组容器，用于样式控制
    var radioGroup = document.createElement('div');
    radioGroup.className = 'fc-radio-group';
    radioGroup.style.marginLeft = '12px';
    radioGroup.style.display = 'inline-flex';
    radioGroup.style.alignItems = 'center';

    // 第一个单选按钮（默认选中）
    var radio1 = document.createElement('input');
    radio1.type = 'radio';
    radio1.name = 'show_carrier_dates';
    radio1.value = '1';
    radio1.id = 'radio-option-1';
    radio1.checked = true;

    var label1 = document.createElement('label');
    label1.htmlFor = 'radio-option-1';
    label1.textContent = '承运取件日期';
    label1.style.margin = '0 15px 0 4px';

    // 第二个单选按钮
    var radio2 = document.createElement('input');
    radio2.type = 'radio';
    radio2.name = 'show_carrier_dates';
    radio2.value = '2';
    radio2.id = 'radio-option-2';

    var label2 = document.createElement('label');
    label2.htmlFor = 'radio-option-2';
    label2.textContent = '第二组事件';
    label2.style.marginLeft = '4px';

    // 组装元素并添加到工具栏
    radioGroup.appendChild(radio1);
    radioGroup.appendChild(label1);
    radioGroup.appendChild(radio2);
    radioGroup.appendChild(label2);
    toolbarChunk.appendChild(radioGroup);

    // 绑定切换事件：切换时重新加载日历数据
    var radios = document.querySelectorAll('input[name="show_carrier_dates"]');
    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            calendar.refetchEvents();
        });
    });
}

// 执行添加单选按钮的函数
addRadioButtons();

关键说明 #

• 避免重复添加：通过检查.fc-radio-group是否存在，确保控件只创建一次
• 动态事件加载：将events配置为函数，每次调用refetchEvents时，会根据当前选中的单选按钮值获取对应数据
• 定位准确：用.fc-toolbar-chunk:first-child定位到包含prev/next/today按钮的工具栏区块，确保单选按钮显示在Today按钮旁边

内容的提问来源于stack exchange，提问作者always-a-learner