feat: add iCal & Google and Outlook integration

src/lib/calendarHelpers.ts

@@ -0,0 +1,118 @@
+/**
+ * Calendar integration utilities for iCal generation and calendar service links
+ */
+
+export interface CalendarEvent {
+	name: string;
+	date: string;
+	time: string;
+	location: string;
+	description?: string;
+	url?: string;
+}
+
+/**
+ * Formats a date and time string for iCal format (UTC)
+ */
+export const formatDateForICal = (date: string, time: string): string => {
+	const eventDate = new Date(`${date}T${time}`);
+	return eventDate.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
+};
+
+/**
+ * Generates iCal content for an event
+ */
+export const generateICalContent = (event: CalendarEvent, eventId: string): string => {
+	const startDate = formatDateForICal(event.date, event.time);
+	const endDate = formatDateForICal(event.date, event.time); // You might want to add duration logic here
+	const eventUrl = event.url || '';
+
+	return `BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//Cactoide//Event Calendar//EN
+BEGIN:VEVENT
+UID:${eventId}@cactoide.com
+DTSTAMP:${new Date().toISOString().replace(/[-:]/g, '').split('.')[0]}Z
+DTSTART:${startDate}
+DTEND:${endDate}
+SUMMARY:${event.name}
+DESCRIPTION:${event.description || `Event URL: ${eventUrl}`}
+LOCATION:${event.location}
+URL:${eventUrl}
+END:VEVENT
+END:VCALENDAR`;
+};
+
+/**
+ * Downloads an iCal file for the given event
+ */
+export const downloadICalFile = (
+	event: CalendarEvent,
+	eventId: string,
+	filename?: string
+): void => {
+	const icalContent = generateICalContent(event, eventId);
+	const blob = new Blob([icalContent], { type: 'text/calendar;charset=utf-8' });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement('a');
+	link.href = url;
+	link.download = filename || `${event.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.ics`;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
+	URL.revokeObjectURL(url);
+};
+
+/**
+ * Generates Google Calendar URL for adding an event
+ */
+export const getGoogleCalendarUrl = (
+	event: CalendarEvent,
+	eventId: string,
+	baseUrl: string
+): string => {
+	const eventUrl = event.url || `${baseUrl}/event/${eventId}`;
+	const startDate = formatDateForICal(event.date, event.time);
+	const endDate = formatDateForICal(event.date, event.time);
+
+	return `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(event.name)}&dates=${startDate}/${endDate}&details=${encodeURIComponent(event.description || `Event URL: ${eventUrl}`)}&location=${encodeURIComponent(event.location)}`;
+};
+
+/**
+ * Generates Microsoft Outlook URL for adding an event
+ */
+export const getOutlookCalendarUrl = (
+	event: CalendarEvent,
+	eventId: string,
+	baseUrl: string
+): string => {
+	const eventUrl = event.url || `${baseUrl}/event/${eventId}`;
+	const startDate = formatDateForICal(event.date, event.time);
+	const endDate = formatDateForICal(event.date, event.time);
+
+	return `https://outlook.live.com/calendar/0/deeplink/compose?subject=${encodeURIComponent(event.name)}&startdt=${startDate}&enddt=${endDate}&body=${encodeURIComponent(event.description || `Event URL: ${eventUrl}`)}&location=${encodeURIComponent(event.location)}`;
+};
+
+/**
+ * Opens Google Calendar in a new tab
+ */
+export const addToGoogleCalendar = (
+	event: CalendarEvent,
+	eventId: string,
+	baseUrl: string
+): void => {
+	const url = getGoogleCalendarUrl(event, eventId, baseUrl);
+	window.open(url, '_blank');
+};
+
+/**
+ * Opens Microsoft Outlook in a new tab
+ */
+export const addToOutlookCalendar = (
+	event: CalendarEvent,
+	eventId: string,
+	baseUrl: string
+): void => {
+	const url = getOutlookCalendarUrl(event, eventId, baseUrl);
+	window.open(url, '_blank');
+};

src/lib/components/CalendarModal.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { CalendarEvent } from '../calendarHelpers.js';
+	import {
+		addToGoogleCalendar,
+		addToOutlookCalendar,
+		downloadICalFile
+	} from '../calendarHelpers.js';
+
+	export let isOpen: boolean = false;
+	export let event: CalendarEvent;
+	export let eventId: string;
+	export let baseUrl: string = '';
+
+	const dispatch = createEventDispatcher();
+
+	const closeModal = () => {
+		dispatch('close');
+	};
+
+	const handleModalClick = (event: MouseEvent) => {
+		if (event.target === event.currentTarget) {
+			closeModal();
+		}
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape') {
+			closeModal();
+		}
+	};
+
+	const handleGoogleCalendar = () => {
+		addToGoogleCalendar(event, eventId, baseUrl);
+		closeModal();
+	};
+
+	const handleOutlookCalendar = () => {
+		addToOutlookCalendar(event, eventId, baseUrl);
+		closeModal();
+	};
+
+	const handleDownloadICal = () => {
+		downloadICalFile(event, eventId);
+		closeModal();
+	};
+
+	// Focus the first button when modal opens
+	$: if (isOpen) {
+		setTimeout(() => {
+			const firstButton = document.querySelector('[data-calendar-option]') as HTMLButtonElement;
+			firstButton?.focus();
+		}, 100);
+	}
+</script>
+
+{#if isOpen}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+		on:click={handleModalClick}
+		on:keydown={handleKeydown}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="calendar-modal-title"
+		tabindex="-1"
+	>
+		<div class="mx-4 w-full max-w-md rounded-sm border border-white/20 bg-slate-900 p-6 shadow-2xl">
+			<div class="mb-6 flex items-center justify-between">
+				<h3 id="calendar-modal-title" class="text-xl font-bold text-white">Add to Calendar</h3>
+				<button
+					on:click={closeModal}
+					class="text-slate-400 transition-colors duration-200 hover:text-white"
+					aria-label="Close modal"
+				>
+					<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						></path>
+					</svg>
+				</button>
+			</div>
+
+			<div class="space-y-3">
+				<button
+					on:click={handleGoogleCalendar}
+					data-calendar-option
+					class="w-full rounded-sm border border-white/20 bg-white/5 px-4 py-3 text-left transition-all duration-200 hover:scale-105 hover:bg-white/10"
+				>
+					<div class="flex items-center space-x-3">
+						<div class="flex h-8 w-8 items-center justify-center rounded-sm bg-blue-500/20">
+							<svg class="h-4 w-4 text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+								<path
+									d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+								/>
+								<path
+									d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+								/>
+								<path
+									d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.84.81-.62z"
+								/>
+								<path
+									d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-semibold text-white">Google Calendar</p>
+							<p class="text-sm text-slate-400">Add to Google Calendar</p>
+						</div>
+					</div>
+				</button>
+
+				<button
+					on:click={handleOutlookCalendar}
+					class="w-full rounded-sm border border-white/20 bg-white/5 px-4 py-3 text-left transition-all duration-200 hover:scale-105 hover:bg-white/10"
+				>
+					<div class="flex items-center space-x-3">
+						<div class="flex h-8 w-8 items-center justify-center rounded-sm bg-blue-600/20">
+							<svg class="h-4 w-4 text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+								<path
+									d="M7.462 2.573c-.2-.2-.4-.2-.6 0L.2 9.235c-.2.2-.2.4 0 .6l6.662 6.662c.2.2.4.2.6 0l6.662-6.662c.2-.2.2-.4 0-.6L7.462 2.573z"
+								/>
+								<path
+									d="M23.8 9.235l-6.662-6.662c-.2-.2-.4-.2-.6 0L9.876 9.235c-.2.2-.2.4 0 .6l6.662 6.662c.2.2.4.2.6 0l6.662-6.662c.2-.2.2-.4 0-.6z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-semibold text-white">Microsoft Outlook</p>
+							<p class="text-sm text-slate-400">Add to Outlook Calendar</p>
+						</div>
+					</div>
+				</button>
+
+				<button
+					on:click={handleDownloadICal}
+					class="w-full rounded-sm border border-white/20 bg-white/5 px-4 py-3 text-left transition-all duration-200 hover:scale-105 hover:bg-white/10"
+				>
+					<div class="flex items-center space-x-3">
+						<div class="flex h-8 w-8 items-center justify-center rounded-sm bg-violet-500/20">
+							<svg
+								class="h-4 w-4 text-violet-400"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-semibold text-white">Download iCal File</p>
+							<p class="text-sm text-slate-400">Download .ics file for any calendar app</p>
+						</div>
+					</div>
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

src/routes/event/[id]/+page.svelte

@@ -4,6 +4,8 @@
 	import { goto } from '$app/navigation';
 	import { enhance } from '$app/forms';
 	import { formatTime, formatDate } from '$lib/dateHelpers.js';
+	import CalendarModal from '$lib/components/CalendarModal.svelte';
+	import type { CalendarEvent } from '$lib/calendarHelpers.js';
 
 	export let data: { event: Event; rsvps: RSVP[]; userId: string };
 	export let form;
@@ -16,12 +18,25 @@
 	let success = '';
 	let addGuests = false;
 	let numberOfGuests = 1;
+	let showCalendarModal = false;
+	let calendarEvent: CalendarEvent;
 
 	// Use server-side data
 	$: event = data.event;
 	$: rsvps = data.rsvps;
 	$: currentUserId = data.userId;
 
+	// Create calendar event object when event data changes
+	$: if (event) {
+		calendarEvent = {
+			name: event.name,
+			date: event.date,
+			time: event.time,
+			location: event.location,
+			url: `${window.location.origin}/event/${eventId}`
+		};
+	}
+
 	// Handle form errors from server
 	$: if (form?.error) {
 		error = String(form.error);
@@ -37,7 +52,7 @@
 		numberOfGuests = 1;
 	}
 
-	const eventId = $page.params.id;
+	const eventId = $page.params.id || '';
 
 	const copyEventLink = () => {
 		const url = `${window.location.origin}/event/${eventId}`;
@@ -53,6 +68,15 @@
 		error = '';
 		success = '';
 	};
+
+	// Calendar modal functions
+	const openCalendarModal = () => {
+		showCalendarModal = true;
+	};
+
+	const closeCalendarModal = () => {
+		showCalendarModal = false;
+	};
 </script>
 
 <svelte:head>
@@ -357,19 +381,36 @@
 				</div>
 
 				<!-- Action Buttons -->
-				<div class="max-w-2xl">
+				<div class="max-w-2xl space-y-3">
 					<button
 						on:click={copyEventLink}
 						class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
 					>
 						Copy Link
 					</button>
+					<button
+						on:click={openCalendarModal}
+						class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+					>
+						Add to Calendar
+					</button>
 				</div>
 			</div>
 		{/if}
 	</div>
 </div>
 
+<!-- Calendar Modal -->
+{#if calendarEvent}
+	<CalendarModal
+		bind:isOpen={showCalendarModal}
+		event={calendarEvent}
+		{eventId}
+		baseUrl={window.location.origin}
+		on:close={closeCalendarModal}
+	/>
+{/if}
+
 <!-- Success/Error Messages -->
 {#if success}
 	{#if form?.type === 'add'}