FullCalendar v5 resourceTimelineDay添加事件失败求助

问题现象 #

• 弹窗可获取选中时间，但事件无法添加至选中单元格
• 点击提交按钮后无任何事件被添加

修复方案 #

1. 绑定事件到对应资源（必填）

resourceTimeline视图的事件必须指定resourceId，否则无法关联到具体员工列。从select回调的info对象中提取resource.id即可。

2. 修正allDay属性

选中的是带时分的时间段，需将allDay设为false，否则FullCalendar会识别为全天事件，无法匹配时间槽。

3. 避免重复绑定点击事件

将提交按钮的点击事件绑定移到select回调外部，防止每次选中都重复绑定，导致多次执行添加逻辑。

4. 阻止按钮默认提交行为

给按钮添加type="button"，避免触发表单默认提交（即使form被注释，也能防止潜在问题）。

修改后的代码 #

JavaScript部分

var calendarEl = document.getElementById("calendarTimeline");
var events = [];
// 存储选中的时间和资源信息
var selectedInfo = null;

let calendar = new Calendar(calendarEl, {
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    plugins: [interactionPlugin, resourceTimelinePlugin],
    initialView: "resourceTimelineDay",
    headerToolbar: {
        left: "resourceTimelineDay",
        center: "",
        right: "",
    },
    height: "auto",
    locale: "ja",
    editable: true,
    selectable: true,
    select: function(info) {
        selectedInfo = info;
        $('.modalCSV').find('input[name=time_start]').val(moment(info.startStr).format('YYYY-MM-DD HH:mm'));
        $('.modalCSV').find('input[name=time_end]').val(moment(info.endStr).format('YYYY-MM-DD HH:mm'));
        $('.modalCSV').toggleClass('is-visible');
    },
    resourceAreaColumns: [{
            field: 'title',
            headerContent: 'スタッフ'
        },
        {
            field: 'count',
            headerContent: '出勤回数'
        }
    ],
    snapDuration: '00:15:00',
    resourceAreaWidth: "190px",
    views: {
        resourceTimelineDay: {
            buttonText: '日',
            slotDuration: "00:15:00",
            slotMinWidth: "10",
        },
    },
    resources: [{
            id: "1",
            title: "佐藤",
            count: "10",
            eventColor: "#b6d7a8"
        },
        {
            id: "2",
            title: "山田",
            count: "12",
            eventColor: "#ffe5e5"
        },
        {
            id: "3",
            title: "田中",
            count: "3",
            eventColor: "#bbd6ee"
        },
        {
            id: "4",
            title: "鈴木",
            count: "5",
            eventColor: "#e7e6e6"
        },
    ],
});
calendar.render();

// 提前绑定提交按钮事件
$('#btn-sumbit').on('click', function(e) {
    if (!selectedInfo) return;
    
    calendar.addEvent({
        title: '新しいイベント', // 建议添加标题，否则可能看不到事件
        start: selectedInfo.start,
        end: selectedInfo.end,
        allDay: false,
        resourceId: selectedInfo.resource.id // 绑定到选中的资源
    });

    $('.modalCSV').toggleClass('is-visible');
    selectedInfo = null; // 清空选中信息
});

// 取消按钮逻辑
$('#btn-cancel').on('click', function() {
    $('.modalCSV').toggleClass('is-visible');
    selectedInfo = null;
});

HTML部分

<div id="calendarTimeline" class="w-full"></div>

<div class="modalCSV">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-wrapper modal-transition border-3 rounded-md border__color--red200 w-auto xl:w-1/4">
        <div class="modal-header bg__color--red200">
            <h2 class="modal-heading text-center text-white font-bold py-2">再通知送信</h2>
        </div>

        <div class="modal-body p-3 sm:p-5">
            <div class="modal-content">
                <div class="py-5 px-3 text-left flex flex-col gap-5">
                    <div>
                        <label for="time_start">開始時間</label>
                        <input type="text" name="time_start" id="time_start" class="border__color--gray100 rounded w-full">
                    </div>
                    <div>
                        <label for="time_end">終了時間</label>
                        <input type="text" name="time_end" id="time_end" class="border__color--gray100 rounded w-full">
                    </div>
                </div>
                <div class="flex justify-center mt-3 mx-3">
                    <button id="btn-cancel" type="button" class="modal-toggleCSV w-32 sm:w-44 py-1 bg-white rounded border-2 border__color--gray300 text__color-gray100 hover:opacity-80">
                        キャンセル
                    </button>
                    <button id="btn-sumbit" type="button" class="ml-3 w-32 sm:w-44 py-1 bg-white rounded border-2 text__color--red100 border__color--red200 hover:opacity-80 ">
                        送信
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

额外说明 #

• 建议给事件添加title，否则事件可能因为没有内容而不可见
• 不需要调用calendar.refetchEvents()，addEvent方法会自动将事件渲染到日历上
• 取消按钮绑定逻辑，可清空选中信息避免残留

内容的提问来源于stack exchange，提问作者Ngô Văn Hoàng