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

Got it, let's walk through how to add that "Copy" button functionality step by step. You already have the weekly view up and running with events, so we just need to wire up three key parts: grabbing the current week's events, letting the user pick a target week, and duplicating those events.

1. 添加右上角的「复制」按钮 #

First, we'll add a custom button to FullCalendar's header. Modify your existing initialization code to include this:

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'copyButton,month,agendaWeek,agendaDay' // 加入自定义的复制按钮
  },
  customButtons: {
    copyButton: {
      text: '复制',
      click: function() {
        // 点击时触发复制逻辑
        copyCurrentWeekEvents();
      }
    }
  },
  // 你已有的其他配置（事件数据、回调函数等）
  events: [
    // 你的现有事件数据
  ]
});

2. 编写复制逻辑函数 #

Next, create the copyCurrentWeekEvents function that handles grabbing events, selecting a target week, and duplicating:

function copyCurrentWeekEvents() {
  // 获取日历实例
  const calendar = $('#calendar').fullCalendar('getCalendar');
  const currentView = calendar.getView();
  
  // 定义当前显示周的起始和结束日期
  const currentWeekStart = currentView.start.clone().startOf('week');
  const currentWeekEnd = currentView.start.clone().endOf('week');

  // 筛选出当前周内（或与当前周重叠）的事件
  const currentWeekEvents = calendar.clientEvents(event => {
    // 如果只想要完全包含在当前周内的事件，可以调整这个判断条件
    return event.start.isBefore(currentWeekEnd) && event.end.isAfter(currentWeekStart);
  });

  // 如果当前周没有事件，直接提示返回
  if (currentWeekEvents.length === 0) {
    alert('当前周没有可复制的事件！');
    return;
  }

  // 让用户选择目标周（可以替换为更友好的日期选择器提升体验）
  const targetDateInput = prompt('请输入目标周的任意日期（格式：YYYY-MM-DD），我们会自动匹配到对应周：');
  if (!targetDateInput) return;

  try {
    // 计算目标周的起始日期，以及和当前周的天数差
    const targetWeekStart = moment(targetDateInput).startOf('week');
    const dayOffset = targetWeekStart.diff(currentWeekStart, 'days');

    // 逐个复制事件到目标周
    currentWeekEvents.forEach(event => {
      // 创建新的事件对象（不要直接修改原事件！）
      const newEvent = {
        title: event.title,
        start: event.start.clone().add(dayOffset, 'days'),
        end: event.end ? event.end.clone().add(dayOffset, 'days') : null,
        allDay: event.allDay,
        color: event.color, // 复制你需要的其他自定义属性
        description: event.description
      };

      // 将新事件添加到日历中
      calendar.renderEvent(newEvent, true); // `true`表示标记为持久化事件

      // 可选：如果需要保存到后端，取消下面的AJAX代码注释
      /*
      $.ajax({
        url: '/api/events',
        method: 'POST',
        data: newEvent,
        success: res => console.log('事件保存成功：', res),
        error: err => console.error('事件保存失败：', err)
      });
      */
    });

    alert(`成功复制 ${currentWeekEvents.length} 个事件到目标周！`);
  } catch (err) {
    alert('日期格式错误，请输入 YYYY-MM-DD 格式的日期！');
  }
}

关键注意事项 #

• 跨周事件处理: 当前的筛选条件包含了与当前周重叠的事件。如果你只想要完全包含在当前周内的事件，可以把判断条件改为：

  return event.start.isSameOrAfter(currentWeekStart) && event.end.isSameOrBefore(currentWeekEnd);
  

• 用户体验优化: 示例中用的prompt比较简陋，建议替换为专业的日期选择器（比如jQuery UI Datepicker或现代前端日期组件），让操作更顺畅。
• 后端持久化: 如果需要刷新页面后保留复制的事件，一定要取消示例中AJAX代码的注释，把新事件数据发送到服务器存储。
• 事件ID: 不要复制原事件的id属性，让后端为新事件生成唯一ID，避免数据冲突。

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