如何在FullCalendar中获取当前显示周的事件并实现事件复制？

嘿，我来帮你搞定这个问题！要实现点击外部按钮复制当前周的事件，核心就两步：拿到当前周的日期范围，然后筛选出这个范围内的所有事件。下面结合你的代码场景，给你具体的实现方案：

步骤1：获取当前周的日期范围 #

首先通过FullCalendar的API获取当前视图的起止日期。对于周视图来说，start是当前周的第一天（具体是周日还是周一取决于你的日历配置），end是下一周的第一天（FullCalendar的日期范围是左闭右开的，所以end不包含在当前周内）。

步骤2：筛选当前周的事件 #

用clientEvents()方法，它可以接收一个过滤函数，帮你精准找出落在当前周范围内的事件。这个方法会返回符合条件的所有事件对象数组，方便后续复制操作。

完整代码示例 #

假设你的复制按钮ID是copy-button，可以这么写：

// 给复制按钮绑定点击事件
$('#copy-button').click(function() {
    // 获取日历实例
    const calendar = $('#calendar').fullCalendar('getCalendar');
    
    // 获取当前周视图的起止日期
    const currentView = calendar.getView();
    const weekStart = currentView.start; // 当前周开始日期
    const weekEnd = currentView.end;     // 当前周结束日期（左闭右开）
    
    // 筛选出当前周内的所有事件
    const currentWeekEvents = calendar.clientEvents(function(event) {
        // 适配全天事件和非全天事件的日期判断逻辑
        // 事件start必须早于周结束日期，且end必须晚于周开始日期
        return event.start.isBefore(weekEnd) && event.end.isAfter(weekStart);
    });
    
    // 现在currentWeekEvents就是当前显示周的所有事件啦！
    // 接下来可以对这些事件做复制操作，比如复制到下一周
    if (currentWeekEvents.length > 0) {
        // 示例：复制到下一周
        const targetWeekStart = weekStart.clone().add(1, 'week');
        currentWeekEvents.forEach(event => {
            // 计算事件相对于当前周开始的时间差，再映射到目标周
            const timeDiffStart = event.start.diff(weekStart);
            const timeDiffEnd = event.end.diff(weekStart);
            
            // 构建新事件对象，复制原事件的关键属性
            const newEvent = {
                title: event.title,
                start: targetWeekStart.clone().add(timeDiffStart),
                end: targetWeekStart.clone().add(timeDiffEnd),
                allDay: event.allDay,
                color: event.color, // 保留原事件的颜色
                // 按需添加其他属性，比如description、className等
            };
            
            // 将新事件添加到日历
            calendar.addEvent(newEvent);
        });
        
        alert('当前周事件已成功复制到下一周！');
    } else {
        alert('当前周没有可复制的事件哦～');
    }
});

注意事项 #

• 日期判断逻辑：FullCalendar的全天事件end属性是次日日期（比如2024-05-20的全天事件，end是2024-05-21），所以用event.start.isBefore(weekEnd)和event.end.isAfter(weekStart)能准确覆盖所有在当前周内的事件。
• 重复事件处理：clientEvents()会返回当前周内渲染的重复事件实例，所以即使是重复事件，也能正确获取到当前周的那一条。
• API版本兼容：你的代码用的是FullCalendar v3的语法（$('#calendar').fullCalendar(...)），上面的代码完全适配v3；如果是v4+版本，API会有小变化（比如用getCurrentView()代替getView()，getEvents()代替clientEvents()），但核心逻辑保持一致。

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