FullCalendar v3.4.0：能否重写默认范围过滤器实现自定义事件展示？

解决方案 #

针对你遇到的这个问题，在FullCalendar 3.4.0中有两种可行的处理方式，其中第一种不需要修改源码，更安全易维护：

方式一：给目标事件添加stick属性（推荐） #

FullCalendar 3.x原生支持给事件添加stick: true属性，标记为stick的事件会强制显示在当前视图中，不受默认的时间范围过滤逻辑影响。你可以在API返回事件后，先筛选出「当日+未来10天」的事件，给它们添加这个属性再传给callback：

events: function (start, end, timezone, callback) {
    app.CalendarService.getStoreSpecificCalendar(calendarServiceOptions)
        .done(function (events) {
            const now = moment();
            const tenDaysLater = moment().add(10, 'days');
            // 处理事件：给符合时间范围的事件添加stick属性
            const processedEvents = events.map(event => {
                const eventStart = moment(event.start);
                // 判断事件是否在目标时间范围内
                if (eventStart.isBetween(now, tenDaysLater, null, '[]')) {
                    return { ...event, stick: true };
                }
                return event; // 不在范围内的事件仍遵循默认过滤
            });
            callback(processedEvents);
            console.log(processedEvents); // 可以查看处理后的事件列表
        }).fail(function () {
            window.location.href = errorPageUrl;
        });
}

同时，建议给你的自定义视图cvDay2添加明确的duration配置，确保视图容器有足够的空间展示这些事件：

views: {
    customAgendaWeek: {
        eventLimit: 100,
        duration: { weeks: 1 }
    },
    cvDay2: {
        eventLimit: 100,
        duration: { days: 11 } // 当日+未来10天，共11天的时间范围
    }
},

方式二：重写FullCalendar内部的applyRange方法（不推荐） #

如果你一定要彻底替换默认的范围过滤逻辑，可以重写FullCalendar的EventSource.prototype.applyRange方法——这是3.x版本中负责事件范围过滤的核心函数。注意这种方式会影响全局所有视图的过滤逻辑，需要谨慎使用：

// 必须在初始化FullCalendar之前执行这段代码
if (window.FullCalendar && FullCalendar.EventSource) {
    // 先保存原始方法，方便后续需要恢复
    const originalApplyRange = FullCalendar.EventSource.prototype.applyRange;
    
    // 重写过滤逻辑
    FullCalendar.EventSource.prototype.applyRange = function(events, range) {
        const now = moment();
        const tenDaysLater = moment().add(10, 'days');
        // 自定义过滤：只保留当日到未来10天的事件
        return events.filter(event => {
            const eventStart = moment(event.start);
            return eventStart.isBetween(now, tenDaysLater, null, '[]');
        });
        
        // 如果需要针对特定视图生效，可以加判断，例如：
        // if (this.calendar && this.calendar.view.name === 'cvDay2') {
        //     // 自定义逻辑
        // } else {
        //     // 其他视图用原始逻辑
        //     return originalApplyRange.call(this, events, range);
        // }
    };
}

// 之后再初始化你的日历（原有代码不变）
$('#calendar').fullCalendar({
    // 你的配置...
});

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