Google calendar component (#1367)

Author: nikoshell

src/components/GoogleCalendar.astro

@@ -0,0 +1,62 @@
+---
+// GoogleCalendar.astro
+export interface Props {
+  calendarId?: string;
+  height?: string;
+  width?: string;
+  title?: string;
+  showTitle?: boolean;
+  showPrint?: boolean;
+  showTabs?: boolean;
+  showCalendars?: boolean;
+  showTz?: boolean;
+  mode?: 'WEEK' | 'MONTH' | 'AGENDA';
+  backgroundColor?: string;
+  dates?: string;
+}
+
+const {
+  calendarId = "c_b87075b29cf4a9dd4da3fe724fcba92a4b406aa3f91cb7e7ce50fede43215b17@group.calendar.google.com",
+  height = "600",
+  width = "800",
+  title = "My Calendar",
+  showTitle = true,
+  showPrint = true,
+  showTabs = true,
+  showCalendars = true,
+  showTz = false,
+  mode = "MONTH",
+  backgroundColor = "%23000000",
+  dates = "20250714/20250720"
+} = Astro.props;
+
+// Construct the embed URL
+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)}&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">
+  <!-- Desktop/Tablet Calendar -->
+  <iframe
+    src={embedUrl}
+    class="hidden md:block w-full max-w-4xl rounded-lg shadow-lg border-0"
+    style={`border: 0; width: ${width}px; height: ${height}px;`}
+    frameborder="0"
+    scrolling="no"
+    title={title}
+    loading="lazy"
+  ></iframe>
+
+  <!-- Mobile Calendar (Agenda View) -->
+  <iframe
+    src={mobileEmbedUrl}
+    class="block md:hidden w-full rounded-lg shadow-lg border-0"
+    style="height: 400px;"
+    frameborder="0"
+    scrolling="no"
+    title={`${title} - Mobile View`}
+    loading="lazy"
+  ></iframe>
+</div>

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/_test_components.astro

@@ -1,6 +1,6 @@
 
 ---
-import Layout from "@layouts/Layout.astro";
+import Layout from "@layouts/SectionLayout.astro";
 import Button from "@ui/Button.astro";
 import Headline from "@ui/Headline.astro"
 import Icon from "@ui/Icon.astro"
@@ -17,7 +17,8 @@ import Icon from "@ui/Icon.astro"
 
 
 <Headline as="h1" id="components" title="Example components" />
-<section class="prose-xl my-10">
+
+Key Features
     <Headline id="button" title="Button" />
     <div class="grid gap-2 w-[200px]">
       <Button>Primary Button</Button>
@@ -28,9 +29,7 @@ import Icon from "@ui/Icon.astro"
       <Button url="/about">Internal Link</Button>
       <Button url="https://example.com">External Link</Button>
     </div>
-</section>
 
-<section class="prose-xl my-10">
     <Headline id="button" title="Icons" />
     <div class="grid gap-2 w-[200px]">
       <Icon name="check" />
@@ -49,5 +48,4 @@ import Icon from "@ui/Icon.astro"
       <Button icon="clock" iconRight={false} iconSize="fa-2xl">Prev</Button>
 
     </div>
-</section>
 </Layout>