修改React-Calendly集成中Inline Widget的CSS样式

Calendly的Inline Widget本质是嵌入的跨域iframe，常规的Styled Components、DOM操作会因为浏览器同源策略受限。要实现隐藏阴影、时区，修改日期背景等需求，可通过以下两种方案解决：

方案1：iframe加载完成后注入自定义样式 #

通过监听iframe加载事件，获取其内部文档并注入CSS样式，覆盖Calendly默认样式：

import React, { useEffect, useRef } from 'react';
import { InlineWidget } from "react-calendly";

const Calendar = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const injectCustomStyles = () => {
      const iframe = containerRef.current?.querySelector('iframe');
      if (!iframe?.contentDocument) return;

      const styleSheet = document.createElement('style');
      styleSheet.textContent = `
        /* 隐藏时区显示 */
        .calendly-timezone {
          display: none !important;
        }
        /* 移除组件阴影 */
        .calendly-inline-widget {
          box-shadow: none !important;
        }
        /* 修改选中日期的背景色 */
        .calendly-day--selected {
          background-color: #2563eb !important; /* 替换为你的自定义颜色 */
        }
        /* 隐藏指定类名的元素（对应你之前尝试的.cp5dqoq） */
        .cp5dqoq {
          display: none !important;
          visibility: hidden !important;
        }
      `;

      iframe.contentDocument.head.appendChild(styleSheet);
    };

    const iframe = containerRef.current?.querySelector('iframe');
    if (iframe) {
      iframe.addEventListener('load', injectCustomStyles);
      return () => iframe.removeEventListener('load', injectCustomStyles);
    }
  }, []);

  return (
    <div ref={containerRef}>
      <InlineWidget
        frameBorder="0"
        scrolling="no"
        height="900px"
        url={url} // 替换为你的Calendly活动链接
      />
    </div>
  );
};

export default Calendar;

注意事项： #

• 跨域权限：需确保你的域名已添加到Calendly后台的「允许的域名」列表中（路径：Calendly设置 → 安全 → 嵌入设置），否则浏览器会阻止访问iframe内部文档。
• 类名稳定性：Calendly内部CSS类名可能随版本更新变化，若样式失效，需通过浏览器开发者工具重新定位目标元素的类名。
• 样式优先级：使用!important强制覆盖Calendly的默认样式，确保自定义规则生效。

方案2：利用Calendly后台品牌化设置 #

优先使用Calendly官方提供的自定义选项，无需编写代码：

1. 登录Calendly后台，进入目标活动类型的编辑页面
2. 找到「品牌化」选项卡，可自定义日历的主题色、字体、边框等样式
3. 部分元素（如时区）可通过活动设置中的「显示选项」控制是否展示

这种方法更稳定，避免因类名变化导致样式失效，适合基础的品牌定制需求。

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