diff --git a/components/calendar.tsx b/components/calendar.tsx
new file mode 100644
index 00000000..182739c5
--- /dev/null
+++ b/components/calendar.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { RefreshCw, Calendar as CalendarIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface Event {
+ id: string;
+ title: string;
+ start: string;
+ end: string;
+ allDay: boolean;
+ calendar: string;
+}
+
+export function Calendar() {
+ const [events, setEvents] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const router = useRouter();
+
+ const fetchEvents = async () => {
+ setLoading(true);
+ try {
+ // Placeholder for actual API call
+ // const response = await fetch('/api/calendar/events');
+ // const data = await response.json();
+ // setEvents(data.events);
+ setError(null);
+ } catch (err) {
+ console.error('Error fetching events:', err);
+ setError('Failed to load events');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchEvents();
+ }, []);
+
+ const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return new Intl.DateTimeFormat('fr-FR', {
+ day: '2-digit',
+ month: 'short'
+ }).format(date);
+ };
+
+ return (
+
+
+ Calendar
+
+
+
+ {loading ? (
+
+ ) : error ? (
+ {error}
+ ) : events.length === 0 ? (
+ No upcoming events
+ ) : (
+
+ {events.map((event) => (
+
+
+
+
+
+ {formatDate(event.start)}
+
+
+
+
+ {event.title}
+
+
+ {event.calendar}
+
+
+
+
+ ))}
+