Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make calendar timezone, locale and dark mode aware #221

Merged
merged 12 commits into from
Nov 7, 2024
2 changes: 1 addition & 1 deletion .pre-commit-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 4 additions & 12 deletions community/calendar.mdx
Original file line number Diff line number Diff line change
@@ -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 />
33 changes: 33 additions & 0 deletions src/components/Calendar/index.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading