Alternative with @fullcalendar/google-calendar

community/calendar.mdx

@@ -3,14 +3,6 @@
 Below is the events calendar where you can find various community meetings. These events are welcoming to newcomers
 who are interested in getting involved with conda related projects:
 
-_All times shown in UTC_
+import GoogleCalendar from '@site/src/components/Calendar';
 
-<iframe
-  src="https://calendar.google.com/calendar/embed?height=500&wkst=1&bgcolor=%23ffffff&ctz=utc&showTitle=0&showTz=1&src=ODgwNTU3MGE0ZTFjYTIzMTk4NDI5NzFkYjQzODBlZDUxOGM0OTA1NzdjMDY0NTRhZGYyMzAzNzM0NTA2ZjM5N0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23F4511E"
-  style="border:solid 1px #777"
-  width="100%"
-  height="500"
-  frameborder="0"
-  scrolling="no"
-  style={{ "margin-bottom": "2em", "margin-top": "1em" }}
-></iframe>
+<GoogleCalendar />

docusaurus.config.js

@@ -201,6 +201,10 @@ const config = {
       },
     ],
   ],
+  customFields: {
+    // Freeform object to hold custom data to be accessed in your theme
+    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
+  }
 };
 
 module.exports = config;

package.json

@@ -25,6 +25,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/google-calendar": "^6.1.11",
+    "@fullcalendar/react": "^6.1.11",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^2.3.1",

src/components/Calendar/index.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import FullCalendar from "@fullcalendar/react";
+import googleCalendarPlugin from "@fullcalendar/google-calendar";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function GoogleCalendar() {
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        const { siteConfig } = useDocusaurusContext();
+        const GOOGLE_API_KEY = siteConfig.customFields.GOOGLE_API_KEY;
+        if (!GOOGLE_API_KEY)
+          return <div>Error: GOOGLE_API_KEY is not set.</div>;
+        const calendarId =
+          "8805570a4e1ca2319842971db4380ed518c490577c06454adf2303734506f397@group.calendar.google.com";
+        return (
+          <>
+            <FullCalendar
+              plugins={[dayGridPlugin, googleCalendarPlugin]}
+              googleCalendarApiKey={GOOGLE_API_KEY}
+              events={{ googleCalendarId: calendarId }}
+              initialView="dayGridMonth"
+            />
+            <a
+              href="https://calendar.google.com/calendar/r?cid=8805570a4e1ca2319842971db4380ed518c490577c06454adf2303734506f397@group.calendar.google.com"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Add it to your calendar
+            </a>
+          </>
+        );
+      }}
+    </BrowserOnly>
+  );
+}