ASP.NET Core MVC中FullCalendar添加事件后功能失效求助

在ASP.NET Core MVC项目中实现FullCalendar点击按钮添加事件功能，新添加的事件能正常显示，但之后日历完全无响应（无法删除事件、再次添加新事件），同时控制台抛出以下错误：

index.global.js:9 Uncaught TypeError: TOOLTIP: Option "title" provided type "undefined" but expected type "(string|element|function)".
    at bootstrap.bundle.min.js:6:1021
    at Array.forEach (<anonymous>)
    at r (bootstrap.bundle.min.js:6:856)
    at Ye._getConfig (bootstrap.bundle.min.js:6:68366)
    at new Ye (bootstrap.bundle.min.js:6:60740)
    at Ye.getOrCreateInstance (bootstrap.bundle.min.js:6:6735)
    at HTMLAnchorElement.<anonymous> (bootstrap.bundle.min.js:6:69178)
    at Function.each (jquery.js:381:19)
    at jQuery.fn.init.each (jquery.js:203:17)
    at jQuery.fn.init.jQueryInterface [as tooltip] (bootstrap.bundle.min.js:6:69150)

Index.cshtml代码：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            nowIndicator: true,
            headerToolbar: {
                left: 'prev,next today',
                center: 'addEventButton',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            selectable: true,
            selectMirror: true,
            dayMaxEvents: true, // allow "more" link when too many events
            
            eventClick: function (arg) {
                if (confirm('Are you sure you want to delete this event?')) {
                    arg.event.remove()
                }
            },

            events: '/Home/GetEvents',
            
            eventDidMount: function (info) {
                $(info.el).tooltip({
                    title: info.event.extendedProps.description,
                    container: 'body',
                    delay: { "show": 50, "hide": 50 }
                });
            },
            
            customButtons: {
                addEventButton: {
                    text: 'add event...',
                    click: function () {
                        var dateStr = prompt('Enter a date in YYYY-MM-DD format');
                        var date = new Date(dateStr + 'T00:00:00'); // will be in local time

                        if (!isNaN(date.valueOf())) { // valid?
                            calendar.addEvent({
                                title: 'dynamic title',
                                start: date,
                                allDay: true
                            });
                            alert('Great. Now, update your database...');
                        } else {
                            alert('Invalid date.');
                        }
                    }
                }
            }
        });
        calendar.render();
    });
</script>

<div id='calendar'></div>

Layout.cshtml中的库引用：

<body>
<script src='~/fullcalendar/dist/index.global.js'></script> <!-- fullcalendar6-1-9 -->
<script src='~/js/bootstrap.bundle.min.js'></script> <!-- bootstrap@5.1.1 -->
<script src='~/lib/jquery/dist/jquery.js'></script> <!-- jQuery JavaScript Library v3.5.1 -->
</body>

已尝试将addEvent的title改为固定字符串，但问题依旧。

1. 修复Tooltip初始化的undefined问题 #

错误核心原因：动态添加的事件未包含extendedProps.description属性，导致eventDidMount中初始化tooltip时，title参数为undefined，触发Bootstrap的类型校验错误，直接中断后续JavaScript执行，造成日历失去响应。

修改eventDidMount方法，给title设置默认值：

eventDidMount: function (info) {
    $(info.el).tooltip({
        title: info.event.extendedProps.description || '', // 用空字符串作为默认值避免undefined
        container: 'body',
        delay: { "show": 50, "hide": 50 }
    });
},

2. 调整库的加载顺序 #

Bootstrap依赖jQuery，必须先加载jQuery再加载Bootstrap，否则会导致Bootstrap功能异常。修改Layout.cshtml中的脚本顺序：

<body>
<script src='~/lib/jquery/dist/jquery.js'></script> <!-- 优先加载jQuery -->
<script src='~/js/bootstrap.bundle.min.js'></script> <!-- 再加载Bootstrap -->
<script src='~/fullcalendar/dist/index.global.js'></script> <!-- 最后加载FullCalendar -->
</body>

3. 可选：保持事件结构一致（推荐） #

如果后端返回的事件都包含description属性，可在添加动态事件时同步带上该属性，避免默认值处理：

calendar.addEvent({
    title: 'dynamic title',
    start: date,
    allDay: true,
    extendedProps: {
        description: '' // 可设置初始描述，或通过弹窗让用户输入
    }
});

完成以上修改后，重新运行项目，添加事件后日历的删除、再次添加等交互功能即可恢复正常。

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