FullCalendar多功能使用问题：如何让日期选择、事件添加等功能同时生效

为什么只有最后一段脚本生效 #

你对同一个#calendarDOM元素初始化了3次FullCalendar实例，每次新实例渲染都会完全覆盖之前的实例配置和状态，所以只有最后一次初始化的配置（仅保留添加按钮功能）会生效。

多功能共存的配置方法 #

将所有配置项合并到同一个FullCalendar初始化逻辑中即可，所有参数、回调、自定义配置都放在同一个构造函数的配置对象里，不要拆分多次初始化。

选中日期添加事件的实现方式 #

修改select回调逻辑，直接使用选中日期区间的start/end参数，无需用户手动输入日期，仅弹窗获取事件名称后调用addEvent方法添加事件即可。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FullCalendar多功能演示</title>
    <link href="main.css" rel="stylesheet" />
    <script src="ko.js"></script>
    <script src="main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var Calendar = FullCalendar.Calendar;
            var Draggable = FullCalendar.Draggable;
            // 注意：如果不需要外部事件拖拽功能，可以删除以下两行和drop相关配置
            var containerEl = document.getElementById('external-events');
            var checkbox = document.getElementById('drop-remove');
            var calendarEl = document.getElementById('calendar');

            // 所有配置合并到一个初始化对象中
            var calendar = new Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ko',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title addEventButton',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay',
                },
                editable: true, 
                droppable: true, // 开启拖拽功能，不需要可删除
                selectable: true, // 开启日期选择
                customButtons: {
                    addEventButton: {
                        text: '이벤트 추가',
                        click: function () {
                            var dateStr = prompt('1. Enter a date in YYYY-MM-DD format');
                            var date = new Date(dateStr + 'T00:00:00');
                            var nameStr = prompt('2. Enter a name of your event');
                            if (!isNaN(date.valueOf()) && nameStr.trim()) {
                                calendar.addEvent({
                                    title: nameStr,
                                    start: date,
                                    allDay: true,
                                });
                                alert('Great. Now, update your database...');
                            } else {
                                alert('输入的日期或事件名称无效');
                            }
                        },
                    },
                },
                // 拖拽回调，不需要可删除
                drop: function (info) {
                    if (checkbox && checkbox.checked) {
                        info.draggedEl.parentNode.removeChild(info.draggedEl);
                    }
                },
                // 日期点击回调
                dateClick: function (info) {
                    alert('clicked ' + info.dateStr);
                },
                // 日期选择回调：选中直接添加事件
                select: function (info) {
                    var eventTitle = prompt('请输入事件名称：');
                    if (eventTitle && eventTitle.trim()) {
                        calendar.addEvent({
                            title: eventTitle,
                            start: info.start,
                            end: info.end,
                            allDay: info.allDay
                        });
                        alert('事件添加成功，记得更新数据库');
                    }
                    // 选中后清空选择状态
                    calendar.unselect()
                },
            });
            calendar.render();

            // 外部事件拖拽初始化，不需要可删除
            if (containerEl) {
                new Draggable(containerEl, {
                    itemSelector: '.fc-event',
                    eventData: function(eventEl) {
                        return {
                            title: eventEl.innerText
                        };
                    }
                });
            }
        });
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            font-family: 'Gugi', cursive;
            font-size: 10px;
        }
        #calendar {
            height:600px;
            width: 100%;
        }
        /* 如果需要外部拖拽事件列表可以加以下样式，不需要可删除
        #external-events {
            position: fixed;
            left: 20px;
            top: 20px;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
        }
        .fc-event {
            margin: 10px 0;
            padding: 2px 4px;
            background: #3788d8;
            color: #fff;
            cursor: move;
        }
        */
    </style>
</head>
<body>
    <!-- 如果需要外部拖拽事件列表可以加以下内容，不需要可删除
    <div id="external-events">
        <h4>可拖拽事件</h4>
        <div class="fc-event">我的事件1</div>
        <div class="fc-event">我的事件2</div>
        <p>
            <input type="checkbox" id="drop-remove">
            <label for="drop-remove">拖拽后删除</label>
        </p>
    </div>
    -->
    <div id="calendar-container">
        <div id="calendar"></div>
    </div>
</body>
</html>

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