如何在FullCalendar中同时添加静态事件与动态事件

要在现有动态获取事件的基础上添加静态事件，只需将动态生成的事件数组与静态事件数组合并后，再传递给FullCalendar的events配置项即可，具体修改如下：

步骤说明 #

1. 先把AJAX接口返回的数据转换为事件数组并存储
2. 定义你需要的静态事件数组
3. 使用数组拼接方法，把静态事件加入到动态事件数组中
4. 将合并后的数组赋值给FullCalendar的events参数

修改后的完整代码 #

$(function () {
    var str;
    function ini_events(ele) {
        ele.each(function () {
            var eventObject = {
                title: $.trim($(this).text())
            }
        })
    }
    ini_events($('#external-events div.external-event'))
    var date = new Date()
    var d = date.getDate(),
        m = date.getMonth(),
        y = date.getFullYear()
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar');  
    var d1 = 1;                        
    InitializeCalendar();

    function InitializeCalendar() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "Demo.aspx/GetCalendarData",
            dataType: "json",
            success: function (data) {
                // 1. 转换动态数据为事件数组
                var dynamicEvents = $.map(data.d, function (item, i) {
                    var eventStartDate = new Date(parseInt(item.slotStartTime.substr(6)));
                    var eventEndDate = new Date(parseInt(item.slotEndTime.substr(6)));

                    var event = new Object();
                    event.id = item.slotID;
                    event.start = eventStartDate;
                    event.title = item.slotStatus;
                    event.backgroundColor = item.color;
                    event.allDay= true;
                    return event;
                });

                // 2. 定义静态事件数组，根据需求修改参数
                var staticEvents = [
                    {
                        title: '静态事件1',
                        start: new Date(y, m, d + 2), // 示例：当前日期后2天
                        backgroundColor: '#ff0000',
                        allDay: true
                    },
                    {
                        title: '静态事件2',
                        start: new Date(y, m, d + 5), // 示例：当前日期后5天
                        backgroundColor: '#00ff00',
                        allDay: true
                    }
                ];

                // 3. 合并动态事件与静态事件
                var allEvents = dynamicEvents.concat(staticEvents);

                // 4. 初始化日历，使用合并后的事件数组
                var calendar = new Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: ''
                    },
                    themeSystem: 'bootstrap',
                    events: allEvents
                });                        
                calendar.render();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
})

关键修改点 #

• 将原来直接传入events的$.map结果，先存入dynamicEvents变量
• 新增staticEvents数组，可根据实际需求修改静态事件的日期、标题、背景色等参数
• 使用concat()方法合并动态与静态事件数组，得到包含所有事件的allEvents
• 把allEvents赋值给FullCalendar的events配置项

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