Add calendar to open spaces

Author: nikoshell

src/components/GoogleCalendar.astro

@@ -12,6 +12,7 @@ export interface Props {
   showTz?: boolean;
   mode?: 'WEEK' | 'MONTH' | 'AGENDA';
   backgroundColor?: string;
+  dates?: string;
 }
 
 const {
@@ -25,14 +26,15 @@ const {
   showCalendars = true,
   showTz = false,
   mode = "MONTH",
-  backgroundColor = "%23ffffff"
+  backgroundColor = "%23000000",
+  dates = "20250714/20250720"
 } = Astro.props;
 
 // Construct the embed URL
-const embedUrl = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(calendarId)}&ctz=Europe%2FPrague&mode=${mode}&height=${height}&wkst=2&bgcolor=${backgroundColor}&showTitle=${showTitle ? 1 : 0}&showPrint=${showPrint ? 1 : 0}&showTabs=${showTabs ? 1 : 0}&showCalendars=${showCalendars ? 1 : 0}&showTz=${showTz ? 1 : 0}`;
+const embedUrl = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(calendarId)}&dates=${dates}&ctz=Europe%2FPrague&mode=${mode}&height=${height}&wkst=2&bgcolor=${backgroundColor}&showTitle=${showTitle ? 1 : 0}&showPrint=${showPrint ? 1 : 0}&showTabs=${showTabs ? 1 : 0}&showCalendars=${showCalendars ? 1 : 0}&showTz=${showTz ? 1 : 0}`;
 
 // Mobile-specific embed URL for agenda view
-const mobileEmbedUrl = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(calendarId)}&ctz=Europe%2FPrague&mode=AGENDA&height=400&wkst=2&bgcolor=${backgroundColor}&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0`;
+const mobileEmbedUrl = `https://calendar.google.com/calendar/embed?src=${encodeURIComponent(calendarId)}&dates=${dates}&ctz=Europe%2FPrague&mode=AGENDA&height=400&wkst=2&bgcolor=${backgroundColor}&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0`;
 ---
 
 <div class="flex justify-center items-center my-4 max-w-full overflow-hidden">

src/content/pages/open-spaces.md renamed to src/content/pages/open-spaces.mdx

@@ -24,6 +24,14 @@ serves to attract potential participants interested in joining.
 Check the
 [Open Spaces schedule ↗️!](https://calendar.google.com/calendar/u/0?cid=Y19iODcwNzViMjljZjRhOWRkNGRhM2ZlNzI0ZmNiYTkyYTRiNDA2YWEzZjkxY2I3ZTdjZTUwZmVkZTQzMjE1YjE3QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20)
 
+<GoogleCalendar
+  height="800"
+  width="1000"
+  mode="WEEK"
+  showTitle={false}
+  showPrint={false}
+/>
+
 ## How to Organise an Open Space
 
 To organise your own Open Space session, simply book a free time slot and room

src/pages/[...slug].astro

@@ -16,6 +16,7 @@ import Center from "@components/markdown/Center.astro";
 import EPSLogo from "@components/markdown/EPSLogo.astro";
 import ProfileCard from "@components/profile/ProfileCard.astro";
 import SpeakerCard from "@components/profile/SpeakerCard.astro";
+import GoogleCalendar from '@components/GoogleCalendar.astro';
 
 import Prose from "@ui/Prose.astro";
 
@@ -67,7 +68,8 @@ const description = post.data.subtitle;
         hr: Separator,
         Accordion,
         ProfileCard,
-        SpeakerCard
+        SpeakerCard,
+        GoogleCalendar
       }}
     />
   </Prose>

src/pages/calendar.astro

@@ -26,6 +26,5 @@ import GoogleCalendar from '@components/GoogleCalendar.astro';
   mode="WEEK"
   showTitle={false}
   showPrint={false}
-  backgroundColor="%23f0f0f0"
 />
 </Layout>