Make calendar timezone, locale and dark mode aware

.pre-commit-config.yaml

@@ -32,7 +32,7 @@ repos:
       # verify github syntaxes
       - id: check-github-workflows
   - repo: https://github.com/codespell-project/codespell
-    # see setup.cfg
+    # see pyproject.toml
     rev: v2.3.0
     hooks:
       - id: codespell

community/calendar.mdx

@@ -1,16 +1,8 @@
 # Events Calendar
 
-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:
+Below is the events calendar where you can find various community meetings.
+These events are welcoming to newcomers who are interested in getting involved in the conda ecosystem:
 
-_All times shown in UTC_
+import Calendar 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>
+<Calendar />

src/components/Calendar/index.jsx

@@ -0,0 +1,33 @@
+import { React, useEffect, useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export default function Calendar() {
+  const [firstDay, setFirstDay] = useState(1);
+  const [timezone, setTimezone] = useState("UTC");
+  const [themeMode, setThemeMode] = useState("light");
+  const { colorMode } = useColorMode();
+  useEffect(() => {
+    if (Intl) {
+      const locale = Intl.DateTimeFormat().resolvedOptions().locale;
+      // firstDay API returns 1 for Monday and 7 for Sunday
+      // Google Calendar expects 1 for Sunday and 7 for Saturday
+      let day = (new Intl.Locale(locale)?.weekInfo?.firstDay ?? 0) + 1;
+      if (day === 8) day = 1; // Sunday
+      setFirstDay(day);
+      setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }
+    setThemeMode(colorMode);
+  });
+  return (
+    <iframe
+      src={`https://calendar.google.com/calendar/embed?height=500&wkst=${firstDay}&ctz=${timezone}&showTitle=0&showTz=1&showPrint=0&src=ODgwNTU3MGE0ZTFjYTIzMTk4NDI5NzFkYjQzODBlZDUxOGM0OTA1NzdjMDY0NTRhZGYyMzAzNzM0NTA2ZjM5N0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%2333b679`}
+      width="100%"
+      height="500"
+      style={
+        themeMode === "dark"
+          ? { filter: "invert(95%) brightness(95%) hue-rotate(180deg)" }
+          : {}
+      }
+    ></iframe>
+  );
+}