Add calendar component

Author: nikoshell

src/components/GoogleCalendar.astro

@@ -0,0 +1,60 @@
+---
+// 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;
+}
+
+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 = "%23ffffff"
+} = 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}`;
+
+// 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`;
+---
+
+<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/pages/_test_components.astro

@@ -1,9 +1,10 @@
 
 ---
-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"
+import GoogleCalendar from '@components/GoogleCalendar.astro';
 ---
 
 <Layout
@@ -17,7 +18,17 @@ import Icon from "@ui/Icon.astro"
 
 
 <Headline as="h1" id="components" title="Example components" />
-<section class="prose-xl my-10">
+
+<GoogleCalendar
+  height="800"
+  width="1000"
+  mode="WEEK"
+  showTitle={false}
+  showPrint={false}
+  backgroundColor="%23f0f0f0"
+/>
+
+Key Features
     <Headline id="button" title="Button" />
     <div class="grid gap-2 w-[200px]">
       <Button>Primary Button</Button>
@@ -28,9 +39,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 +58,4 @@ import Icon from "@ui/Icon.astro"
       <Button icon="clock" iconRight={false} iconSize="fa-2xl">Prev</Button>
 
     </div>
-</section>
 </Layout>