@axium/calendar 0.4.8 → 0.5.1

package/db.json

@@ -107,6 +107,16 @@
 					}
 				}
 			}
+		},
+		{
+			"delta": true,
+			"alter_tables": {
+				"calendars": {
+					"add_columns": {
+						"isDefault": { "type": "boolean", "required": true, "default": false }
+					}
+				}
+			}
 		}
 	],
 	"wipe": ["calendars", "events", "acl.calendars"],

package/dist/common.d.ts

@@ -118,12 +118,14 @@ export declare function formatEventTimes(event: Event): string;
 export declare const CalendarInit: z.ZodObject<{
     name: z.ZodString;
     color: any;
+    isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
 }, z.core.$strip>;
 export interface CalendarInit extends z.infer<typeof CalendarInit> {
 }
 export declare const Calendar: z.ZodObject<{
     name: z.ZodString;
     color: any;
+    isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
     id: z.ZodUUID;
     userId: z.ZodUUID;
     created: z.ZodCoercedDate<unknown>;
@@ -162,9 +164,11 @@ declare const CalendarAPI: {
         readonly PUT: readonly [z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
@@ -193,6 +197,7 @@ declare const CalendarAPI: {
         readonly GET: z.ZodArray<z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
@@ -223,6 +228,7 @@ declare const CalendarAPI: {
         readonly GET: z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
@@ -251,9 +257,11 @@ declare const CalendarAPI: {
         readonly PATCH: readonly [z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
         }, z.core.$strip>, z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
@@ -282,6 +290,7 @@ declare const CalendarAPI: {
         readonly DELETE: z.ZodObject<{
             name: z.ZodString;
             color: any;
+            isDefault: z.ZodOptional<z.ZodCoercedBoolean<unknown>>;
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
@@ -478,8 +487,14 @@ declare module '@axium/core/api' {
  * Convert a `Date` to an iCalendar datetime
  */
 export declare function toDateTime(date: Date): string;
+export type ByDay = 'SU' | 'MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA';
 /** e.g. `FR`, `SA` */
-export declare function toByDay(date: Date): string;
+export declare function toByDay(date: Date): ByDay;
+export declare const weekdayInfo: {
+    narrow: string;
+    short: string;
+    rrule: ByDay;
+}[];
 export declare function eventToICS(event: Event): string;
 export declare function eventFromICS(ics: string): Event;
 export {};

package/dist/common.js

@@ -106,7 +106,6 @@ export const EventData = z.object({
     isAllDay: z.coerce.boolean(),
     description: z.string().max(2000).nullish(),
     color: Color.nullish(),
-    // note: recurrences are not support yet
     recurrence: z.string().max(1000).nullish(),
     recurrenceExcludes: z.string().max(100).array().max(100).nullish(),
     recurrenceId: z.uuid().nullish(),
@@ -132,6 +131,7 @@ export function formatEventTimes(event) {
 export const CalendarInit = z.object({
     name: z.string(),
     color: Color.nullish(),
+    isDefault: z.coerce.boolean().optional(),
 });
 export const Calendar = CalendarInit.extend({
     id: z.uuid(),
@@ -191,6 +191,17 @@ export function toDateTime(date) {
 export function toByDay(date) {
     return date.toLocaleString('en', { weekday: 'short' }).slice(0, 2).toUpperCase();
 }
+// Generate weekday labels/names via Intl — Sunday-anchored (getDay() === 0)
+const sunday = new Date(2000, 0, 2); // a known Sunday
+export const weekdayInfo = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(sunday);
+    d.setDate(sunday.getDate() + i);
+    return {
+        narrow: d.toLocaleString('default', { weekday: 'narrow' }),
+        short: d.toLocaleString('default', { weekday: 'short' }),
+        rrule: toByDay(d),
+    };
+});
 export function eventToICS(event) {
     const lines = [
         'BEGIN:VCALENDAR',

package/dist/server/index.js

@@ -40,9 +40,17 @@ addRoute({
     async PUT(request, { id: userId }) {
         const init = await parseBody(request, CalendarInit);
         await checkAuthForUser(request, userId);
+        // A user's first calendar becomes their default so a default always exists.
+        const existing = await database
+            .selectFrom('calendars')
+            .select('id')
+            .where('userId', '=', userId)
+            .limit(1)
+            .executeTakeFirst()
+            .catch(withError('Could not create calendar'));
         return withEncoded(await database
             .insertInto('calendars')
-            .values({ ...withDecoded(init), userId })
+            .values({ ...withDecoded(init), userId, isDefault: !existing })
             .returningAll()
             .executeTakeFirstOrThrow()
             .catch(withError('Could not create calendar')));
@@ -57,14 +65,38 @@ addRoute({
     },
     async PATCH(request, { id }) {
         const body = await parseBody(request, CalendarInit);
-        await authRequestForItem(request, 'calendars', id, { edit: true });
-        return withEncoded(await database
-            .updateTable('calendars')
-            .set(withDecoded(body))
-            .where('id', '=', id)
-            .returningAll()
-            .executeTakeFirstOrThrow()
-            .catch(withError('Could not update calendar')));
+        const { item } = await authRequestForItem(request, 'calendars', id, { edit: true });
+        if (!body.isDefault) {
+            return withEncoded(await database
+                .updateTable('calendars')
+                .set(withDecoded(body))
+                .where('id', '=', id)
+                .returningAll()
+                .executeTakeFirstOrThrow()
+                .catch(withError('Could not update calendar')));
+        }
+        const tx = await database.startTransaction().execute();
+        try {
+            // A calendar being made default must be the only default for its owner, so clear the others first.
+            await tx
+                .updateTable('calendars')
+                .set({ isDefault: false })
+                .where('userId', '=', item.userId)
+                .where('isDefault', '=', true)
+                .execute();
+            const calendar = await tx
+                .updateTable('calendars')
+                .set(withDecoded(body))
+                .where('id', '=', id)
+                .returningAll()
+                .executeTakeFirstOrThrow();
+            await tx.commit().execute();
+            return withEncoded(calendar);
+        }
+        catch (e) {
+            await tx.rollback().execute();
+            throw withError('Could not update calendar')(e);
+        }
     },
     async DELETE(request, { id }) {
         await authRequestForItem(request, 'calendars', id, { manage: true });

package/locales/en.json

@@ -13,7 +13,9 @@
 		"list_owned": "My Calendars",
 		"list_shared": "Shared Calendars",
 		"delete_confirm": "Are you sure you want to delete the calendar \"{name}\"?",
-		"edit": "Edit"
+		"edit": "Edit",
+		"make_default": "Make default",
+		"default": "(default)"
 	},
 	"calendar_init": {
 		"name": "Name",
@@ -23,6 +25,29 @@
 	"event_delete": {
 		"confirm": "Are you sure you want to delete this event?"
 	},
+	"RecurrenceDialog": {
+		"title": "Custom recurrence",
+		"confirm": "Done",
+		"repeat_every": "Repeat every",
+		"on": "On",
+		"freq": {
+			"day": "day",
+			"week": "week",
+			"month": "month",
+			"year": "year"
+		},
+		"monthly": {
+			"on_day": "On the {day}",
+			"on_weekday": "On the {day}"
+		},
+		"end": {
+			"label": "End",
+			"never": "Never",
+			"on": "On",
+			"after": "After",
+			"occurrences": "occurrences"
+		}
+	},
 	"event_init": {
 		"all_day": "All day",
 		"description_placeholder": "Add description",
@@ -32,7 +57,8 @@
 			"monthly_on": "Every month on the {day}",
 			"none": "Does not repeat",
 			"weekly": "Every week on {day}",
-			"yearly": "Every year on {date}"
+			"yearly": "Every year on {date}",
+			"custom": "Custom..."
 		},
 		"submit_edit": "Update",
 		"title_placeholder": "Add title",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.4.8",
+	"version": "0.5.1",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {

package/routes/calendar/+page.svelte

@@ -1,30 +1,20 @@
 <script lang="ts">
 	import { getEvents, type EventInitFormData, type EventInitProp } from '@axium/calendar/client';
-	import type { Event } from '@axium/calendar/common';
-	import {
-		CalendarInit,
-		dateToInputValue,
-		fromRRuleDate,
-		getCalPermissionsInfo,
-		longWeekDay,
-		toByDay,
-		toRRuleDate,
-		weekDayOfMonth,
-		weekDaysFor,
-		withOrdinalSuffix,
-	} from '@axium/calendar/common';
+	import type { Calendar, Event } from '@axium/calendar/common';
+	import { CalendarInit, dateToInputValue, fromRRuleDate, getCalPermissionsInfo, toRRuleDate, weekDaysFor } from '@axium/calendar/common';
 	import * as Cal from '@axium/calendar/components';
 	import { fetchAPI, text } from '@axium/client';
 	import { contextMenu, dynamicRows } from '@axium/client/attachments';
 	import { AccessControlDialog, ColorPicker, Discovery, discovery, FormDialog, Icon, Popover } from '@axium/client/components';
 	import { toast } from '@axium/client/toast';
-	import { colorHashHex, encodeColor } from '@axium/core/color';
+	import { colorHashHex, decodeColor, encodeColor } from '@axium/core/color';
 	import { rrulestr } from 'rrule';
 	import { useSwipe } from 'svelte-gestures';
-	import { SvelteDate } from 'svelte/reactivity';
+	import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 	import { _throw } from 'utilium';
 	import * as z from 'zod';
 	import './cal.css';
+	import RecurrenceSelect from './RecurrenceSelect.svelte';
 
 	const { data } = $props();
 
@@ -55,13 +45,16 @@
 	const spanDays = $derived(span == 'week' ? 7 : _throw('Invalid span value'));
 	const weekDays = $derived(weekDaysFor(start));
 
-	let dialogs = $state<Record<string, HTMLDialogElement>>({});
+	let dialogs = $state<Record<string, HTMLDialogElement>>({}),
+		hiddenCalIds = new SvelteSet<string>();
+
+	const defaultCalendar = $derived(calendars.find(cal => cal.userId == user.id && cal.isDefault) ?? calendars[0]);
 
 	const defaultEventInit = $derived<any>({
 		attendees: [],
 		recurrenceExcludes: [],
 		recurrenceId: null,
-		calId: calendars[0]?.id,
+		calId: defaultCalendar?.id,
 		start: new Date(defaultStart),
 		end: new Date(defaultStart.getTime() + 3600_000),
 	});
@@ -81,7 +74,7 @@
 
 	const recurringEvents = $derived(
 		events
-			.filter(ev => ev.recurrence)
+			.filter(ev => ev.recurrence && !hiddenCalIds.has(ev.calId))
 			.map(ev => {
 				const rule = rrulestr('RRULE:' + ev.recurrence, { dtstart: toRRuleDate(ev.start) });
 				const recurrences = rule
@@ -92,7 +85,13 @@
 	);
 
 	const defaultCalColor = encodeColor(colorHashHex(user.name));
-	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || defaultCalColor);
+	const defaultEventColor = $derived((eventInit.calendar || defaultCalendar)?.color || defaultCalColor);
+
+	async function makeDefault(cal: Calendar) {
+		const result = await fetchAPI('PATCH', 'calendars/:id', { ...cal, isDefault: true }, cal.id);
+		for (const other of calendars) other.isDefault = other.userId == user.id && other.id == cal.id;
+		Object.assign(cal, result);
+	}
 
 	let calSidebar = $state<HTMLDivElement>();
 </script>
@@ -156,11 +155,27 @@
 				class="cal-sidebar-item"
 				{@attach contextMenu(
 					{ i: 'pencil', text: text('calendar.edit'), action: edit },
+					...(cal.isDefault ? [] : [{ i: 'star', text: text('calendar.make_default'), action: () => makeDefault(cal) }]),
 					{ i: 'user-group', text: text('generic.share'), action: () => dialogs['share:' + cal.id].showModal() },
 					{ i: 'trash', text: text('generic.delete'), action: () => dialogs['delete:' + cal.id].showModal() }
 				)}
 			>
-				<span>{cal.name}</span>
+				<span
+					class="icon-text"
+					role="checkbox"
+					aria-checked={!hiddenCalIds.has(cal.id)}
+					tabindex="0"
+					onclick={() => {
+						if (hiddenCalIds.has(cal.id)) hiddenCalIds.delete(cal.id);
+						else hiddenCalIds.add(cal.id);
+					}}
+				>
+					<label class="checkbox" style:--cal-color={decodeColor(cal.color || defaultCalColor)}>
+						{#if !hiddenCalIds.has(cal.id)}<Icon i="check" --size="1.3em" />{/if}
+					</label>
+					<span>{cal.name}</span>
+					{#if cal.isDefault}<span class="subtle">{text('calendar.default')}</span>{/if}
+				</span>
 				<Popover showToggle="hover">
 					<button
 						class="reset menu-item"
@@ -174,6 +189,12 @@
 						<Icon i="pencil" />
 						<span>{text('calendar.edit')}</span>
 					</button>
+					{#if !cal.isDefault}
+						<div class="menu-item" onclick={() => makeDefault(cal)}>
+							<Icon i="star" />
+							<span>{text('calendar.make_default')}</span>
+						</div>
+					{/if}
 					<div class="menu-item" onclick={() => dialogs['share:' + cal.id].showModal()}>
 						<Icon i="user-group" />
 						<span>{text('generic.share')}</span>
@@ -245,6 +266,7 @@
 			{@const eventsForWeekDays = Object.groupBy(
 				events.filter(
 					e =>
+						!hiddenCalIds.has(e.calId) &&
 						e.start < new Date(weekDays[6].getFullYear(), weekDays[6].getMonth(), weekDays[6].getDate() + 1) &&
 						e.end > weekDays[0]
 				),
@@ -314,7 +336,6 @@
 		<div class="event-times">
 			<input
 				type="datetime-local"
-				name="start"
 				id="eventInit.start"
 				bind:value={eventInitStart}
 				onchange={e => (eventInit.start = new Date(e.currentTarget.value))}
@@ -322,7 +343,6 @@
 			/>
 			<input
 				type="datetime-local"
-				name="end"
 				id="eventInit.end"
 				bind:value={eventInitEnd}
 				onchange={e => (eventInit.end = new Date(e.currentTarget.value))}
@@ -335,25 +355,7 @@
 				</label>
 				<label for="eventInit.isAllDay:checkbox">{text('event_init.all_day')}</label>
 				<div class="spacing"></div>
-				<select name="recurrence" bind:value={eventInit.recurrence}>
-					<option value="">{text('event_init.recurrence.none')}</option>
-					<option value="FREQ=DAILY">{text('event_init.recurrence.daily')}</option>
-					<option value="FREQ=WEEKLY;BYDAY={toByDay(eventInit.start)}">
-						{text('event_init.recurrence.weekly', { day: longWeekDay(eventInit.start) })}
-					</option>
-					<option value="FREQ=MONTHLY;BYDAY={Math.ceil(eventInit.start.getDate() / 7) + toByDay(eventInit.start)}"
-						>{text('event_init.recurrence.monthly_on', { day: weekDayOfMonth(eventInit.start) })}
-					</option>
-					<option value="FREQ=MONTHLY;BYMONTHDAY={eventInit.start.getDate()}">
-						{text('event_init.recurrence.monthly_on', { day: withOrdinalSuffix(eventInit.start.getDate()) })}
-					</option>
-					<option value="FREQ=YEARLY;BYMONTH={eventInit.start.getMonth()};BYMONTHDAY={eventInit.start.getDate()}">
-						{text('event_init.recurrence.yearly', {
-							date: eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' }),
-						})}
-					</option>
-					<!-- @todo <option value="">Custom</option> -->
-				</select>
+				<RecurrenceSelect bind:eventInit />
 			</div>
 		</div>
 	</div>

package/routes/calendar/RecurrenceDialog.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { withOrdinalSuffix, toByDay, weekDayOfMonth, weekdayInfo } from '@axium/calendar/common';
+	import type { EventInitProp } from '@axium/calendar/client';
+	import { text } from '@axium/client';
+	import { FormDialog } from '@axium/client/components';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	let {
+		dialog = $bindable(),
+		eventInit = $bindable(),
+	}: {
+		dialog?: HTMLDialogElement;
+		eventInit: EventInitProp;
+	} = $props();
+
+	let interval = $state(1),
+		freq = $state<'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY'>('WEEKLY');
+
+	let byWeekday = $state<SvelteSet<number>>(new SvelteSet());
+	$effect(() => {
+		byWeekday = new SvelteSet([eventInit.start.getDay()]);
+	});
+
+	let monthlyMode = $state<'day' | 'weekday'>('day');
+
+	let endType = $state<'never' | 'on' | 'after'>('never'),
+		endDate = $state(''),
+		endCount = $state(1);
+
+	function buildRRule(): string {
+		const parts: string[] = [`FREQ=${freq}`, `INTERVAL=${interval}`];
+
+		if (freq === 'WEEKLY') {
+			parts.push(
+				`BYDAY=${[...byWeekday]
+					.sort()
+					.map(i => weekdayInfo[i].rrule)
+					.join(',')}`
+			);
+		} else if (freq === 'MONTHLY') {
+			if (monthlyMode === 'weekday') {
+				const nth = Math.ceil(eventInit.start.getDate() / 7);
+				parts.push(`BYDAY=${nth}${toByDay(eventInit.start)}`);
+			} else {
+				parts.push(`BYMONTHDAY=${eventInit.start.getDate()}`);
+			}
+		} else if (freq === 'YEARLY') {
+			parts.push(`BYMONTH=${eventInit.start.getMonth() + 1};BYMONTHDAY=${eventInit.start.getDate()}`);
+		}
+
+		if (endType === 'on' && endDate) {
+			const d = new Date(endDate + 'T00:00:00');
+			const pad = (n: number) => String(n).padStart(2, '0');
+			parts.push(`UNTIL=${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}T000000Z`);
+		} else if (endType === 'after') {
+			parts.push(`COUNT=${endCount}`);
+		}
+
+		return parts.join(';');
+	}
+</script>
+
+<FormDialog
+	bind:dialog
+	id="recurrence-custom"
+	submitText={text('RecurrenceDialog.confirm')}
+	submit={async () => (eventInit.recurrence = buildRRule())}
+>
+	{#snippet header()}
+		<h3>{text('RecurrenceDialog.title')}</h3>
+	{/snippet}
+
+	<div class="row">
+		<span>{text('RecurrenceDialog.repeat_every')}</span>
+		<input type="number" min="1" max="999" bind:value={interval} />
+		<select bind:value={freq}>
+			<option value="DAILY">{text('RecurrenceDialog.freq.day', { n: interval })}</option>
+			<option value="WEEKLY">{text('RecurrenceDialog.freq.week', { n: interval })}</option>
+			<option value="MONTHLY">{text('RecurrenceDialog.freq.month', { n: interval })}</option>
+			<option value="YEARLY">{text('RecurrenceDialog.freq.year', { n: interval })}</option>
+		</select>
+	</div>
+
+	{#if freq === 'WEEKLY'}
+		<div class="on-section">
+			<span class="subtle">{text('RecurrenceDialog.on')}</span>
+			<div class="weekday-toggles">
+				{#each weekdayInfo as { narrow, short }, i}
+					<button
+						type="button"
+						class={['weekday', byWeekday.has(i) && 'active']}
+						onclick={() => {
+							if (!byWeekday.has(i)) byWeekday.add(i);
+							else if (byWeekday.size && i !== eventInit.start.getDay()) byWeekday.delete(i);
+						}}
+						aria-label={short}
+						aria-pressed={byWeekday.has(i)}>{narrow}</button
+					>
+				{/each}
+			</div>
+		</div>
+	{:else if freq === 'MONTHLY'}
+		<div class="on-section">
+			<span class="subtle">{text('RecurrenceDialog.on')}</span>
+			<div class="monthly-options">
+				<label>
+					<input type="radio" bind:group={monthlyMode} value="day" />
+					{text('RecurrenceDialog.monthly.on_day', { day: withOrdinalSuffix(eventInit.start.getDate()) })}
+				</label>
+				<label>
+					<input type="radio" bind:group={monthlyMode} value="weekday" />
+					{text('RecurrenceDialog.monthly.on_weekday', { day: weekDayOfMonth(eventInit.start) })}
+				</label>
+			</div>
+		</div>
+	{/if}
+
+	<div class="end-section">
+		<span class="subtle">{text('RecurrenceDialog.end.label')}</span>
+		<label>
+			<input type="radio" bind:group={endType} value="never" />
+			{text('RecurrenceDialog.end.never')}
+		</label>
+		<label class="end-row">
+			<input type="radio" bind:group={endType} value="on" />
+			{text('RecurrenceDialog.end.on')}
+			<input type="date" bind:value={endDate} disabled={endType !== 'on'} onclick={() => (endType = 'on')} />
+		</label>
+		<label class="end-row">
+			<input type="radio" bind:group={endType} value="after" />
+			{text('RecurrenceDialog.end.after')}
+			<input
+				type="number"
+				min="1"
+				max="999"
+				bind:value={endCount}
+				disabled={endType !== 'after'}
+				onclick={() => (endType = 'after')}
+			/>
+			{text('RecurrenceDialog.end.occurrences')}
+		</label>
+	</div>
+</FormDialog>
+
+<style>
+	h3 {
+		margin: 0 0 0.25em;
+		padding: 0.75em 1em 0;
+		font-size: 1.1em;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+
+		input[type='number'] {
+			width: 4em;
+		}
+	}
+
+	.on-section,
+	.end-section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4em;
+	}
+
+	.weekday-toggles {
+		display: flex;
+		gap: 0.3em;
+	}
+
+	.weekday {
+		width: 2.25em;
+		height: 2.25em;
+		border-radius: 50%;
+		padding: 0;
+
+		&.active {
+			background-color: var(--bg-strong);
+			border-color: var(--border-strong);
+		}
+	}
+
+	.monthly-options {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4em;
+	}
+
+	.end-row {
+		display: flex;
+		align-items: center;
+		gap: 0.4em;
+
+		input[type='number'] {
+			width: 4em;
+		}
+	}
+</style>

package/routes/calendar/RecurrenceSelect.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { EventInitProp } from '@axium/calendar/client';
+	import { longWeekDay, toByDay, weekDayOfMonth, withOrdinalSuffix } from '@axium/calendar/common';
+	import { text } from '@axium/client';
+	import type { Entries } from 'utilium';
+	import RecurrenceDialog from './RecurrenceDialog.svelte';
+
+	let { eventInit = $bindable() }: { eventInit: EventInitProp } = $props();
+
+	const recurrences = $derived({
+		none: '',
+		daily: 'FREQ=DAILY',
+		weekly: `FREQ=WEEKLY;BYDAY=${toByDay(eventInit.start)}`,
+		monthly_by_day: `FREQ=MONTHLY;BYDAY=${Math.ceil(eventInit.start.getDate() / 7) + toByDay(eventInit.start)}`,
+		monthly_by_weekday: `FREQ=MONTHLY;BYMONTHDAY=${eventInit.start.getDate()}`,
+		yearly: `FREQ=YEARLY;BYMONTH=${eventInit.start.getMonth()};BYMONTHDAY=${eventInit.start.getDate()}`,
+	});
+
+	const recurrenceKind = $derived(
+		!eventInit.recurrence
+			? 'none'
+			: (Object.entries(recurrences) as Entries<typeof recurrences>).find(([_, v]) => v === eventInit.recurrence)?.[0] || 'custom'
+	);
+
+	let dialog = $state<HTMLDialogElement>();
+</script>
+
+<select
+	value={recurrenceKind}
+	onchange={e => {
+		const { value } = e.currentTarget;
+		if (value === 'custom')
+			e.currentTarget.value = recurrenceKind; // to prevent "Custom..." being shown when dialog cancelled
+		else if (value in recurrences) eventInit.recurrence = recurrences[value as keyof typeof recurrences];
+	}}
+>
+	<option value="none">{text('event_init.recurrence.none')}</option>
+	<option value="daily">{text('event_init.recurrence.daily')}</option>
+	<option value="weekly">
+		{text('event_init.recurrence.weekly', { day: longWeekDay(eventInit.start) })}
+	</option>
+	<option value="monthly_by_weekday">
+		{text('event_init.recurrence.monthly_on', { day: weekDayOfMonth(eventInit.start) })}
+	</option>
+	<option value="monthly_by_day">
+		{text('event_init.recurrence.monthly_on', { day: withOrdinalSuffix(eventInit.start.getDate()) })}
+	</option>
+	<option value="yearly">
+		{text('event_init.recurrence.yearly', {
+			date: eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' }),
+		})}
+	</option>
+	<option value="custom" onclick={() => dialog?.showModal()}>
+		{text('event_init.recurrence.custom')}
+	</option>
+</select>
+
+<RecurrenceDialog bind:dialog bind:eventInit />

package/routes/calendar/cal.css

@@ -65,14 +65,12 @@ div.attendees {
 			flex: auto;
 		}
 
-		label {
+		> label {
 			flex: none;
 		}
 	}
 
-	input,
-	select,
-	textarea {
+	:is(input, select, textarea):not(.recurrence-dialog *) {
 		width: 100%;
 	}
 
@@ -113,7 +111,18 @@ div.attendees {
 	.cal-sidebar-item {
 		display: flex;
 		align-items: center;
+		gap: 0.5em;
 		justify-content: space-between;
+
+		label.checkbox {
+			border-color: var(--cal-color);
+			flex-shrink: 0;
+		}
+
+		& > span {
+			flex: 1;
+			cursor: pointer;
+		}
 	}
 }