Implement calendar export

eslint.config.mjs

@@ -20,6 +20,7 @@ export default [
       'unicorn/filename-case': 'off',
       'unicorn/expiring-todo-comments': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
+      'unicorn/prefer-string-replace-all': 'off',
     },
   },
 ];

src/components/Schedule/index.tsx

@@ -7,12 +7,16 @@ import {
   DialogContent,
   DialogTitle,
   Button,
+  IconButton,
 } from '@mui/material';
+import EventIcon from '@mui/icons-material/Event';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 
 import EventsCalendar from './EventsCalendar';
 
+import generateICSFile from '@/utils/generateICSFile';
+
 interface ScheduleBaseProps {
   events: DonationEvent[];
   title: string;
@@ -155,6 +159,14 @@ const ScheduleBase = ({ events, title, description }: ScheduleBaseProps) => {
                   {supply.itemName} - {supply.quantityProvided} provided
                 </Typography>
               ))}
+              <IconButton
+                color='primary'
+                onClick={() => generateICSFile(selectedEvent)}
+                sx={{ mt: 2 }}
+              >
+                <EventIcon />
+                Export to Calendar
+              </IconButton>
             </>
           )}
         </DialogContent>

src/utils/generateICSFile.ts

@@ -0,0 +1,43 @@
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  // Replace colons, dashes, and milliseconds
+  return date
+    .toISOString()
+    .replace(/[:-]/g, '') // Remove colons and dashes
+    .replace(/\.\d{3}/, ''); // Remove milliseconds
+};
+
+const createICSContent = (event: DonationEvent) => {
+  const endTime = new Date(new Date(event.date).getTime() + 60 * 60 * 1000);
+  return [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//OpenHands//Donation Event//EN',
+    'BEGIN:VEVENT',
+    `DTSTART:${formatDate(event.date)}`,
+    `DTEND:${formatDate(endTime.toISOString())}`,
+    `SUMMARY:${event.title}`,
+    `DESCRIPTION:Items: ${event.supplies
+      .map((supply) => `${supply.itemName} (${supply.quantityProvided})`)
+      .join(', ')}`,
+    `UID:${event.eventId}-${formatDate(event.date)}`,
+    'END:VEVENT',
+    'END:VCALENDAR',
+  ].join('\r\n'); // use CRLF for better compatibility
+};
+
+const generateICSFile = (event: DonationEvent) => {
+  const icsContent = createICSContent(event);
+  const blob = new Blob([icsContent], {
+    type: 'text/calendar;charset=utf-8',
+  });
+  const link = document.createElement('a');
+  link.href = globalThis.URL.createObjectURL(blob);
+  link.setAttribute('download', `donation-event-${event.eventId}.ics`);
+  document.body.append(link);
+  link.click();
+  link.remove();
+  globalThis.URL.revokeObjectURL(link.href); // Clean up
+};
+
+export default generateICSFile;