Open event details in a modal

islands/calendar/MainCalendar.tsx

@@ -26,9 +26,19 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
   const isImportExportOptionsDropdownOpen = useSignal<boolean>(false);
   const calendarEvents = useSignal<CalendarEvent[]>(initialCalendarEvents);
   const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
+  const openEvent = useSignal<CalendarEvent | null>(null);
 
   const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
   const hourFormat = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' });
+  const eventDateFormat = new Intl.DateTimeFormat('en-GB', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+  const allDayEventDateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: 'numeric' });
   const today = new Date().toISOString().substring(0, 10);
 
   function onClickAddEvent() {
@@ -111,6 +121,8 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
       // }
 
       isDeleting.value = false;
+
+      openEvent.value = null;
     }
   }
 
@@ -501,6 +513,22 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
       </section>
 
       <section class='mx-auto max-w-7xl my-8'>
+        {view === 'day'
+          ? (
+            <section>
+              TODO: Build day view
+            </section>
+          )
+          : null}
+        {view === 'week'
+          ? (
+            <section>
+              TODO: Build week view
+            </section>
+          )
+          : null}
+        {view === 'month'
+          ? (
             <section>
               <section class='shadow-md lg:flex lg:flex-auto lg:flex-col rounded-md'>
                 <section class='grid grid-cols-7 gap-px border-b border-slate-500 bg-slate-700 text-center text-xs font-semibold text-white lg:flex-none rounded-t-md'>
@@ -579,11 +607,12 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
                                   {[...dayEvents].slice(0, 2).map((dayEvent) => (
                                     <li class='mb-1'>
                                       <a
-                                    href='#'
+                                        href='javascript:void(0);'
                                         class={`flex px-2 py-0 rounded-md hover:no-underline hover:opacity-60 ${
                                           visibleCalendars.find((calendar) => calendar.id === dayEvent.calendar_id)
                                             ?.color || 'bg-gray-700'
                                         }`}
+                                        onClick={() => openEvent.value = dayEvent}
                                       >
                                         <time
                                           datetime={new Date(dayEvent.start_date).toISOString()}
@@ -601,8 +630,9 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
                                     ? (
                                       <li class='mb-1'>
                                         <a
-                                      href='#'
+                                          href={`/calendar/view=day&startDate=${shortIsoDate}`}
-                                      class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
+                                          class='flex bg-gray-700 px-2 py-0 rounded-md hover:no-underline hover:opacity-60'
+                                          target='_blank'
                                         >
                                           <p class='flex-auto truncate font-medium text-white'>
                                             ...{dayEvents.length - 2} more event{dayEvents.length - 2 === 1 ? '' : 's'}
@@ -622,6 +652,8 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
                 </section>
               </section>
             </section>
+          )
+          : null}
 
         <span
           class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
@@ -656,6 +688,60 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
         <code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/principals/</code>{' '}
         <code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/calendars/</code>
       </section>
+
+      <section
+        class={`fixed ${openEvent.value ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
+      >
+      </section>
+
+      <section
+        class={`fixed ${
+          openEvent.value ? 'block' : 'hidden'
+        } z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 space-y-5 drop-shadow-lg`}
+      >
+        <h1 class='text-2xl font-semibold'>{openEvent.value?.title || ''}</h1>
+        <header class='py-5 border-t border-b border-slate-500 font-semibold flex justify-between'>
+          <span>
+            {openEvent.value?.start_date ? allDayEventDateFormat.format(new Date(openEvent.value.start_date)) : ''}
+          </span>
+          {openEvent.value?.is_all_day ? <span>All-day</span> : (
+            <span>
+              {openEvent.value?.start_date ? hourFormat.format(new Date(openEvent.value.start_date)) : ''} -{' '}
+              {openEvent.value?.end_date ? hourFormat.format(new Date(openEvent.value.end_date)) : ''}
+            </span>
+          )}
+        </header>
+        {openEvent.value?.extra.description
+          ? (
+            <section class='py-5 border-b border-slate-500'>
+              <p>{openEvent.value.extra.description}</p>
+            </section>
+          )
+          : null}
+        <section class='py-5 border-b border-slate-500'>
+          <p>TODO: location, calendar, recurrence, reminders</p>
+        </section>
+        <footer class='flex justify-between'>
+          <button
+            class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md'
+            onClick={() => onClickDeleteEvent(openEvent.value?.id || '')}
+          >
+            Delete
+          </button>
+          <a
+            href={`/calendar/events/${openEvent.value?.id}`}
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+          >
+            Edit
+          </a>
+          <button
+            class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            onClick={() => openEvent.value = null}
+          >
+            Close
+          </button>
+        </footer>
+      </section>
     </>
   );
 }

lib/types.ts

@@ -147,7 +147,6 @@ export interface Calendar {
   created_at: Date;
 }
 
-// NOTE: I don't really invite people to events in my private calendars, so I don't think I'll need that complexity
 // TODO: Finish (more fields)
 export interface CalendarEvent {
   id: string;
@@ -162,8 +161,17 @@ export interface CalendarEvent {
   extra: {
     description?: string;
     location?: string;
+    attendees?: CalendarEventAttendee[];
     visibility: 'default' | 'public' | 'private';
+    is_recurring?: boolean;
+    recurring_rrule?: string;
   };
   updated_at: Date;
   created_at: Date;
 }
+
+export interface CalendarEventAttendee {
+  email: string;
+  status: 'accepted' | 'rejected' | 'invited';
+  name?: string;
+}

routes/calendar.tsx

@@ -54,7 +54,7 @@ async function getCalendarEvents(userId: string, calendarIds: string[]): Promise
     {
       id: 'event-2',
       user_id: userId,
-      calendar_id: 'personal-1',
+      calendar_id: 'family-1',
       revision: 'fake-rev',
       title: 'Dermatologist',
       start_date: new Date('2024-03-17T16:30:00.000Z'),
@@ -83,6 +83,22 @@ async function getCalendarEvents(userId: string, calendarIds: string[]): Promise
       updated_at: new Date(),
       created_at: new Date(),
     },
+    {
+      id: 'event-4',
+      user_id: userId,
+      calendar_id: 'personal-1',
+      revision: 'fake-rev',
+      title: 'Schedule server updates',
+      start_date: new Date('2024-03-18T09:00:00.000Z'),
+      end_date: new Date('2024-03-18T21:00:00.000Z'),
+      is_all_day: true,
+      status: 'scheduled',
+      extra: {
+        visibility: 'default',
+      },
+      updated_at: new Date(),
+      created_at: new Date(),
+    },
   ];
 }
 
@@ -101,7 +117,7 @@ export const handler: Handlers<Data, FreshContextState> = {
 
     const searchParams = new URL(request.url).searchParams;
 
-    const view = (searchParams.get('view') as Data['view']) || 'week';
+    const view = (searchParams.get('view') as Data['view']) || 'month';
     const startDate = searchParams.get('startDate') || new Date().toISOString().substring(0, 10);
 
     const userCalendars = await getCalendars(context.state.user.id);