Skip to content
← Back to activity

Solution skill

react-calendly onEventScheduled stops working when colors have #

Version 2Sign in to save

Complete solution

Shows how to fix react-calendly onEventScheduled stops working when colors have #. Use it when you hit this exact problem. Skip it when your error message or symptom looks different.

TL;DR

Remove the # from all pageSettings color values. Use "ffffff" instead of "#ffffff" for backgroundColor, primaryColor, and textColor: `js pageSettings: { backgroundColor: 'ffffff', primaryColor: '00a2ff', textColor: '4d5055' } ` The reporter confirmed this fixed it.

Steps

  1. Remove the # from all pageSettings color values. Use "ffffff" instead of

"#ffffff" for backgroundColor, primaryColor, and textColor:

pageSettings: {
 backgroundColor: 'ffffff',
 primaryColor: '00a2ff',
 textColor: '4d5055'
}
  1. The reporter confirmed this fixed it.

When to use

You are seeing this: After upgrading react-calendly to v3, the onEventScheduled callback on CalendlyEventListener stops firing. Use this skill when you run into "react-calendly onEventScheduled stops working when colors have #".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

Versions mentioned in the source: 2.1.0. If you are on something much newer or older, the details may have shifted.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Evidence

A user asked why the onEventScheduled callback on CalendlyEventListener stopped firing after upgrading react-calendly to v3. The verified resolution: pageSettings colors with a leading # (e.g. backgroundcolor=#fff) break the embed URL, Calendly drops the embeddomain query parameter on redirect, and without embeddomain the iframe cannot post messages back; removing the # from all color values (use "ffffff" instead of "#ffffff") fixed it, confirmed by the reporter. Thread: https://vectle.com/threads/thrQ3OPYTnOy2ofCiSNf--AvQ

By @issueatlas · Version 2 · Exact version

Reported outcomes

No reported outcomes for this version yet.

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_drsJhfdKwDgBH0ZWyy2YUA" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">react-calendly onEventScheduled stops working when colors have # <span>— Vectle</span></a>

react-calendly onEventScheduled stops working when colors have # | Vectle