feat: add iCal export

Author: coderbyheart

package-lock.json

@@ -32,6 +32,7 @@
     "ajv": "8.10.0",
     "date-fns-tz": "1.3.0",
     "feather-icons": "4.28.0",
+    "ics": "2.35.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "6.2.2"

package.json

@@ -1,12 +1,19 @@
 import styles from 'app/App.module.css'
 import { DaySelector } from 'app/DaySelector'
 import { Editor } from 'app/Editor'
-import { EyeIcon, EyeOffIcon, LockIcon, UnLockIcon } from 'app/FeatherIcons'
+import {
+	CalendarIcon,
+	EyeIcon,
+	EyeOffIcon,
+	LockIcon,
+	UnLockIcon,
+} from 'app/FeatherIcons'
 import { Footer } from 'app/Footer'
 import formStyles from 'app/Form.module.css'
-import { Schedule } from 'app/Schedule'
+import { Schedule as ScheduleComponent } from 'app/Schedule'
 import { Theme, ThemeSwitcher } from 'app/ThemeSwitcher'
 import { TimeZoneSelector } from 'app/timezones'
+import { useIcalExport } from 'app/useIcalExport'
 import { format } from 'date-fns'
 import { useEffect, useState } from 'react'
 
@@ -16,8 +23,16 @@ if (typeof window.matchMedia === 'function') {
 	defaultTheme = match.matches ? Theme.dark : Theme.light
 }
 
+export type Schedule = {
+	name: string
+	day: string
+	tz: string
+	sessions: Record<number, string>
+	hidePastSessions: boolean
+}
+
 export const App = () => {
-	let cfg = {
+	let cfg: Schedule = {
 		name: 'ExampleConf',
 		day: format(new Date(), 'yyyy-MM-dd'),
 		tz: 'Europe/Oslo',
@@ -70,6 +85,8 @@ export const App = () => {
 		hidePastSessionsDefault,
 	)
 
+	const downloadIcal = useIcalExport(cfg)
+
 	useEffect(() => {
 		document.documentElement.setAttribute('data-theme', theme)
 	}, [theme])
@@ -153,6 +170,15 @@ export const App = () => {
 								{updatedName}: {updatedDay}
 							</h1>
 							<div className="actions">
+								<button
+									className={formStyles.Button}
+									title="Export as calendar (.ics)"
+									onClick={() => {
+										downloadIcal()
+									}}
+								>
+									<CalendarIcon />
+								</button>
 								<button
 									className={formStyles.Button}
 									title="Hide past sessions"
@@ -164,7 +190,7 @@ export const App = () => {
 								<ThemeSwitcher currentTheme={theme} onSwitch={updateTheme} />
 							</div>
 						</div>
-						<Schedule
+						<ScheduleComponent
 							sessions={cfg.sessions}
 							eventTimezoneName={cfg.tz}
 							conferenceDate={cfg.day}

src/App.tsx

@@ -363,3 +363,7 @@ export const LightModeIcon = (options?: TypedIconOptions) => (
 export const GithubIcon = (options?: TypedIconOptions) => (
 	<FeatherIcon {...options} type="github" title="GitHub" />
 )
+
+export const CalendarIcon = (options?: TypedIconOptions) => (
+	<FeatherIcon {...options} type="calendar" title="Export as calendar (.ics)" />
+)