如何使用JavaScript捕获Calendly iframe的改期(reschedule)事件

数据老陈

2026-10-4

解决方案

你现有监听逻辑的事件过滤规则是正确的，无法捕获改期事件是因为Calendly的改期操作会触发独立的calendly.event_rescheduled事件，与首次预约的calendly.event_scheduled为不同的事件类型。

该事件返回的payload包含两组预约数据：

old_event：改期前的原始预约完整信息，包含预约唯一标识uuid、预约时间、用户填写的联系信息等
new_event：改期后的新预约完整信息，字段结构和calendly.event_scheduled返回的事件数据完全一致

你可以参考如下优化后的监听代码，同时兼容首次预约、改期、取消三种场景的处理：

function isCalendlyEvent(e) {
  return e.data.event && e.data.event.indexOf('calendly') === 0;
};

window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
      const eventType = e.data.event;
      const eventPayload = e.data.payload;
      
      switch(eventType) {
        // 首次预约
        case 'calendly.event_scheduled':
          console.log('新预约创建', eventPayload.event);
          // 原有写入数据库逻辑保留
          break;
        // 预约改期
        case 'calendly.event_rescheduled':
          console.log('预约改期', eventPayload.old_event, eventPayload.new_event);
          // 新增改期处理逻辑：可以先根据old_event的uuid标记原有预约失效，再存入new_event的新预约数据
          break;
        // 预约取消
        case 'calendly.event_canceled':
          console.log('预约取消', eventPayload.event);
          // 可按需补充取消逻辑：根据event的uuid标记对应预约已取消
          break;
        default:
          // 其他Calendly事件可按需处理
          break;
      }
    }
  }
);