如何从 javascript 中捕获 Calendly iframe 重新安排事件答案

【问题标题】：How to capture Calendly iframe reschedule event from javascript如何从 javascript 中捕获 Calendly iframe 重新安排事件
【发布时间】：2021-09-08 11:19:46
【问题描述】：

我正在制作预约医疗预约申请并使用日历进行预约。我可以通过 js 事件成功将第一次预定的事件保存到数据库中，但无法捕获重新安排的事件。

 function isCalendlyEvent(e) {
return e.data.event && e.data.event.indexOf('calendly') === 0;
};
window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
      console.log(e.data);
    }
  }
);

我能够通过“calendly.event_scheduled”事件捕获计划事件，但无法捕获重新计划事件数据。

【问题讨论】：

标签： javascript calendly

【解决方案1】：

您好，这是一个非常烦人的日历问题，并且没有为此提供官方解决方案。没有这样的监听器可以捕获重新调度事件。

可能有两种解决方法：

使用 webhook，当 reschedule 事件发生时，它会触发取消和创建的钩子。

对我有用的解决方案是，通过 calendly api 创建一个新事件并删除前一个事件，您可以通过 iframe 取消事件来获取网络选项卡中的删除 api。以下是我在 laravel 中的实现，通过 js 调用和 ajax 请求向您的控制器监听创建事件，并从 calendly 和您的数据库中删除前一个事件（如果您保存在您的数据库中）：

         $scheduleDelete = ScheduledCall::where('id', $request->scheduleId)->first();
         $cancelUrl = $scheduleDelete->calendly_cancel_url;
         $cancelUrl = substr($cancelUrl, strrpos($cancelUrl, '/') + 1);
         $cancelUrl = 'https://calendly.com/api/booking/cancellations/' . $cancelUrl;
         $data = [
             'cancellation' => [
                 'cancel_reason' => '',
                 'canceled_by'   => 'Nonsulin'
             ]
         ];
         $payload = json_encode($data);
         Helper::apiCurlRequest($cancelUrl, 'PUT', config('app.CALENDLY_API_KEY'), $payload);
         $scheduleDelete->delete();

【讨论】：