@axium/calendar 0.2.0 → 0.3.0

package/db.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "../server/schemas/db.json",
-	"format": 0,
+	"format": 1,
 	"versions": [
 		{
 			"delta": false,
@@ -58,15 +58,15 @@
 					}
 				}
 			},
-			"indexes": [
-				"calendars:userId",
-				"acl.calendars:userId",
-				"acl.calendars:itemId",
-				"events:calId",
-				"events:recurrenceId",
-				"attendees:eventId",
-				"attendees:userId"
-			]
+			"indexes": {
+				"calendars_userId": { "on": "calendars", "columns": ["userId"] },
+				"acl_calendars_userId": { "on": "acl.calendars", "columns": ["userId"] },
+				"acl_calendars_itemId": { "on": "acl.calendars", "columns": ["itemId"] },
+				"events_calId": { "on": "events", "columns": ["calId"] },
+				"events_recurrenceId": { "on": "events", "columns": ["recurrenceId"] },
+				"attendees_eventId": { "on": "attendees", "columns": ["eventId"] },
+				"attendees_userId": { "on": "attendees", "columns": ["userId"] }
+			}
 		},
 		{
 			"delta": true,

package/dist/client.d.ts

@@ -1,4 +1,8 @@
-import type { Calendar, Event, EventData, EventFilter } from './common.js';
+import type { AttendeeInit, Calendar, Event, EventData, EventFilter } from './common.js';
 export declare function getEvents(calendars: Calendar[], filter: EventFilter): Promise<Event[]>;
 export interface EventInitFormData extends Record<Exclude<keyof EventData, 'attendees' | 'recurrenceExcludes'>, string> {
 }
+export interface EventInitProp extends EventData {
+    attendees: AttendeeInit[];
+    calendar?: Calendar;
+}

package/dist/common.d.ts

@@ -1,6 +1,9 @@
 import { type UserInternal } from '@axium/core';
 import type { WithRequired } from 'utilium';
 import * as z from 'zod';
+export declare function withOrdinalSuffix(val: number): string;
+export declare function toRRuleDate(date: Date): Date;
+export declare function fromRRuleDate(d: Date): Date;
 export declare function dayOfYear(date: Date): number;
 /**
  *
@@ -10,6 +13,8 @@ export declare function dayOfYear(date: Date): number;
  */
 export declare function weekOfYear(date: Date, baseOnWeeks?: boolean): number;
 export declare function weekDaysFor(date: Date): Date[];
+export declare function longWeekDay(date: Date): string;
+export declare function weekDayOfMonth(date: Date): string;
 /**
  * Converts a date to the format expected by `<input type="datetime-local">`
  */
@@ -472,6 +477,12 @@ declare module '@axium/core/api' {
     interface $API extends CalendarAPI {
     }
 }
+/**
+ * Convert a `Date` to an iCalendar datetime
+ */
+export declare function toDateTime(date: Date): string;
+/** e.g. `FR`, `SA` */
+export declare function toByDay(date: Date): string;
 export declare function eventToICS(event: Event): string;
 export declare function eventFromICS(ics: string): Event;
 export {};

package/dist/common.js

@@ -2,6 +2,22 @@ import { $API, AccessControl, pickPermissions } from '@axium/core';
 import * as z from 'zod';
 import $pkg from '../package.json' with { type: 'json' };
 import { Color } from '@axium/core/color';
+export function withOrdinalSuffix(val) {
+    const tens = val % 10, hundreds = val % 100;
+    if (tens == 1 && hundreds != 11)
+        return val + 'st';
+    if (tens == 2 && hundreds != 12)
+        return val + 'nd';
+    if (tens == 3 && hundreds != 13)
+        return val + 'rd';
+    return val + 'th';
+}
+export function toRRuleDate(date) {
+    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()));
+}
+export function fromRRuleDate(d) {
+    return new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes());
+}
 export function dayOfYear(date) {
     const yearStart = new Date(date.getFullYear(), 0, 1);
     return Math.round((date.getTime() - yearStart.getTime()) / 86400000 + 1);
@@ -27,6 +43,13 @@ export function weekDaysFor(date) {
     }
     return days;
 }
+export function longWeekDay(date) {
+    return date.toLocaleString('default', { weekday: 'long' });
+}
+export function weekDayOfMonth(date) {
+    const weekOfMonth = Math.ceil(date.getDate() / 7);
+    return `${withOrdinalSuffix(weekOfMonth)} ${longWeekDay(date)}`;
+}
 /**
  * Converts a date to the format expected by `<input type="datetime-local">`
  */
@@ -154,19 +177,31 @@ const CalendarAPI = {
     },
 };
 Object.assign($API, CalendarAPI);
-function formatDate(date) {
-    return date.toUTCString().replaceAll('-', '').replaceAll(':', '');
+/**
+ * Convert a `Date` to an iCalendar datetime
+ */
+export function toDateTime(date) {
+    return date
+        .toISOString()
+        .replaceAll('-', '')
+        .replaceAll(':', '')
+        .replace(/\.\d+Z$/, 'Z');
+}
+/** e.g. `FR`, `SA` */
+export function toByDay(date) {
+    return date.toLocaleString('en', { weekday: 'short' }).slice(0, 2).toUpperCase();
 }
 export function eventToICS(event) {
     const lines = [
         'BEGIN:VCALENDAR',
         'VERSION:2.0',
         `PRODID:-//Axium//Calendar ${$pkg.version}//EN`,
+        'CALSCALE:GREGORIAN',
         'BEGIN:VEVENT',
         'UID:' + event.id,
-        'DTSTAMP:' + formatDate(new Date()),
-        'DTSTART:' + formatDate(event.start),
-        'DTEND:' + formatDate(event.end),
+        'DTSTAMP:' + toDateTime(new Date()),
+        'DTSTART:' + toDateTime(event.start),
+        'DTEND:' + toDateTime(event.end),
         'SUMMARY:' + event.summary,
     ];
     if (event.description)

package/dist/server.d.ts

@@ -1,4 +1,5 @@
 import type schema from '../db.json';
+import type { FromFile as FromSchemaFile } from '@axium/server/db/schema';
 declare module '@axium/server/database' {
     interface Schema extends FromSchemaFile<typeof schema> {
     }

package/dist/server.js

@@ -87,7 +87,10 @@ addRoute({
             .selectAll()
             .select(withAttendees)
             .where('calId', '=', id)
-            .where(sql `(${sql.ref('start')}, ${sql.ref('end')}) OVERLAPS (${sql.val(filter.start)}, ${sql.val(filter.end)})`)
+            .where(eb => eb.or([
+            sql `(${sql.ref('start')}, ${sql.ref('end')}) OVERLAPS (${sql.val(filter.start)}, ${sql.val(filter.end)})`,
+            eb.and([eb('recurrence', 'is not', null), eb('recurrence', '!=', '')]), // @todo try to figure out a way to only select events we know recur during the filter
+        ]))
             .limit(1000)
             .execute()
             .then(result => result.map(withEncoded))

package/lib/Event.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import type { EventInitProp } from '@axium/calendar/client';
+	import type { Event } from '@axium/calendar/common';
+	import { eventToICS, formatEventTimes, toRRuleDate } from '@axium/calendar/common';
+	import { contextMenu } from '@axium/client/attachments';
+	import { Icon, Popover } from '@axium/client/components';
+	import { colorHashHex, decodeColor, encodeColor } from '@axium/core/color';
+	import { rrulestr } from 'rrule';
+	import { download } from 'utilium/dom.js';
+
+	let {
+		event,
+		eventEditId = $bindable(),
+		eventEditCalId = $bindable(),
+		eventInit = $bindable(),
+		initData = event,
+	}: {
+		event: Event;
+		eventInit: EventInitProp;
+		eventEditId?: string;
+		eventEditCalId?: string;
+		initData?: Event;
+	} = $props();
+
+	const id = $props.id();
+
+	const recurrence = $derived(
+		!event.recurrence ? '' : rrulestr('RRULE:' + event.recurrence, { dtstart: toRRuleDate(event.start) }).toText()
+	);
+</script>
+
+<Popover {id} onclick={e => e.stopPropagation()}>
+	{#snippet toggle()}
+		{@const start = event.start.getHours() * 60 + event.start.getMinutes()}
+		{@const end = event.end.getHours() * 60 + event.end.getMinutes()}
+		<div
+			class="Event"
+			style:top="{start / 14.4}%"
+			style:height="{(end - start) / 14.4}%"
+			style="--event-color:{decodeColor(
+				event.color || event.calendar!.color || encodeColor(colorHashHex(event.calendar!.name), true)
+			)}"
+			{@attach contextMenu(
+				{
+					i: 'pencil',
+					text: 'Edit',
+					action: () => {
+						eventEditId = event.id;
+						eventEditCalId = event.calId;
+						eventInit = initData;
+						document.querySelector<HTMLDialogElement>('#event-init')!.showModal();
+					},
+				},
+				{
+					i: 'file-export',
+					text: 'Export .ics',
+					action: () => download(event.summary + '.ics', eventToICS(event)),
+				},
+				{
+					i: 'trash-can',
+					text: 'Delete',
+					action: () => {
+						eventEditId = event.id;
+						document.querySelector<HTMLDialogElement>('#event-delete')!.showModal();
+					},
+				}
+			)}
+		>
+			<span>{event.summary}</span>
+			<span class="subtle">{formatEventTimes(event)}</span>
+		</div>
+	{/snippet}
+
+	<div class="event-actions">
+		<button
+			class="reset"
+			onclick={() => {
+				eventEditId = event.id;
+				eventEditCalId = event.calId;
+				eventInit = initData;
+			}}
+			command="show-modal"
+			commandfor="event-init"><Icon i="pencil" /></button
+		>
+		<button class="reset" onclick={() => download(event.summary + '.ics', eventToICS(event))}><Icon i="file-export" /></button>
+		<button class="reset" onclick={() => (eventEditId = event.id)} command="show-modal" commandfor="event-delete"
+			><Icon i="trash-can" /></button
+		>
+		<button class="reset" command="hide-popover" commandfor={id}><Icon i="xmark" /></button>
+	</div>
+
+	<h3>{event.summary}</h3>
+
+	<div>
+		<Icon i="clock" />
+		<span>
+			{#if event.start.getDate() == event.end.getDate()}
+				{event.start.toLocaleDateString()}, {formatEventTimes(event)}
+			{:else if event.isAllDay}
+				{event.start.toLocaleDateString()} - {event.end.toLocaleDateString()}
+			{:else}
+				{event.start.toLocaleString()} - {event.end.toLocaleString()}
+			{/if}
+		</span>
+	</div>
+
+	{#if event.recurrence}
+		<div>
+			<Icon i="arrows-rotate" />
+			<span>{recurrence}</span>
+		</div>
+	{/if}
+
+	{#if event.location}
+		<div>
+			<Icon i="location-dot" />
+			<span>{event.location}</span>
+		</div>
+	{/if}
+
+	<div>
+		<Icon i="calendar" />
+		<span>
+			{#if event.calendar}
+				{event.calendar.name}
+			{:else}
+				<i>Unknown Calendar</i>
+			{/if}
+		</span>
+	</div>
+
+	{#if event.attendees.length}
+		<div class="attendees-container">
+			<Icon i="user-group" />
+			<div class="attendees">
+				{#each event.attendees ?? [] as attendee (attendee.email)}
+					<div class="attendee">{attendee.email}</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if event.description}
+		<div class="description">
+			<Icon i="block-quote" />
+			<span>{event.description}</span>
+		</div>
+	{/if}
+</Popover>
+
+<style>
+	.Event {
+		width: calc(100% - 0.5em);
+		position: absolute;
+		border-radius: 0.5em;
+		padding: 0.25em;
+		background-color: var(--event-color, var(--bg-alt));
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+		container-type: size;
+		overflow: hidden;
+
+		@container (height < 2.5em) {
+			.subtle {
+				display: none;
+			}
+		}
+
+		:global(& + :popover-open) {
+			gap: 0.75em;
+			padding: 1em;
+
+			.event-actions {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				gap: 0.25em;
+
+				button {
+					padding: 0.5em;
+					border-radius: 0.5em;
+				}
+			}
+		}
+	}
+</style>

package/lib/index.ts

@@ -1 +1,2 @@
+export { default as Event } from './Event.svelte';
 export { default as Select } from './Select.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {
@@ -42,6 +42,7 @@
 		"utilium": "^2.7.0"
 	},
 	"dependencies": {
+		"rrule": "^2.8.1",
 		"zod": "^4.0.5"
 	},
 	"axium": {

package/routes/calendar/+page.svelte

@@ -1,22 +1,38 @@
 <script lang="ts">
-	import { getEvents, type EventInitFormData } from '@axium/calendar/client';
-	import type { Calendar, Event, EventData } from '@axium/calendar/common';
-	import { AttendeeInit, dateToInputValue, formatEventTimes, getCalPermissionsInfo, weekDaysFor } from '@axium/calendar/common';
+	import { getEvents, type EventInitFormData, type EventInitProp } from '@axium/calendar/client';
+	import type { Event } from '@axium/calendar/common';
+	import {
+		dateToInputValue,
+		fromRRuleDate,
+		getCalPermissionsInfo,
+		longWeekDay,
+		toByDay,
+		toRRuleDate,
+		weekDayOfMonth,
+		weekDaysFor,
+		withOrdinalSuffix,
+	} from '@axium/calendar/common';
 	import * as Cal from '@axium/calendar/components';
 	import { contextMenu, dynamicRows } from '@axium/client/attachments';
 	import { AccessControlDialog, ColorPicker, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
-	import { colorHashHex, encodeColor, decodeColor } from '@axium/core/color';
+	import { colorHashHex, encodeColor } from '@axium/core/color';
+	import { rrulestr } from 'rrule';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { _throw } from 'utilium';
-	import z from 'zod';
+	import * as z from 'zod';
+
 	const { data } = $props();
 
 	const { user } = data.session;
 
 	const now = new SvelteDate();
+	now.setMilliseconds(0);
 	setInterval(() => now.setTime(Date.now()), 60_000);
 	const today = $derived(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0));
+	const defaultStart = $derived(
+		new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), Math.round(now.getMinutes() / 30) * 30, 0, 0)
+	);
 
 	let start = new SvelteDate(data.filter.start);
 	let end = new SvelteDate(data.filter.end);
@@ -33,30 +49,36 @@
 	const span = $state('week');
 	const spanDays = $derived(span == 'week' ? 7 : _throw('Invalid span value'));
 	const weekDays = $derived(weekDaysFor(start));
-	const eventsForWeekDays = $derived(
-		Object.groupBy(
-			events.filter(
-				e => e.start < new Date(weekDays[6].getFullYear(), weekDays[6].getMonth(), weekDays[6].getDate() + 1) && e.end > weekDays[0]
-			),
-			ev => ev?.start.getDay()
-		)
-	);
 
 	let dialogs = $state<Record<string, HTMLDialogElement>>({});
 
-	const defaultEventInit = {
+	const defaultEventInit = $derived<any>({
 		attendees: [],
 		recurrenceExcludes: [],
 		recurrenceId: null,
 		calId: calendars[0]?.id,
-	} as any;
+		start: new Date(defaultStart),
+		end: new Date(defaultStart.getTime() + 3600_000),
+	});
 
-	let eventInit = $state<EventData & { attendees: AttendeeInit[]; calendar?: Calendar }>(defaultEventInit),
+	let eventInit = $state<EventInitProp>(defaultEventInit),
 		eventInitStart = $derived(dateToInputValue(eventInit.start)),
 		eventInitEnd = $derived(dateToInputValue(eventInit.end)),
 		eventEditId = $state<string>(),
 		eventEditCalId = $state<string>();
 
+	const recurringEvents = $derived(
+		events
+			.filter(ev => ev.recurrence)
+			.map(ev => {
+				const rule = rrulestr('RRULE:' + ev.recurrence, { dtstart: toRRuleDate(ev.start) });
+				const recurrences = rule
+					.between(toRRuleDate(new Date(start.getTime())), toRRuleDate(new Date(end.getTime())), true)
+					.map(fromRRuleDate);
+				return { ...ev, rule, recurrences };
+			})
+	);
+
 	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || encodeColor(colorHashHex(user.name)));
 </script>
 
@@ -162,6 +184,14 @@
 			<span class="hour empty"></span>
 		</div>
 		{#if span == 'week'}
+			{@const eventsForWeekDays = Object.groupBy(
+				events.filter(
+					e =>
+						e.start < new Date(weekDays[6].getFullYear(), weekDays[6].getMonth(), weekDays[6].getDate() + 1) &&
+						e.end > weekDays[0]
+				),
+				ev => ev.start.getDay()
+			)}
 			<div class="cal-content week">
 				{#each weekDays as day, i}
 					<div class="day">
@@ -172,98 +202,13 @@
 
 						<div class="day-content">
 							{#each eventsForWeekDays[i] ?? [] as event}
-								<Popover id="event-popover:{event.id}" onclick={e => e.stopPropagation()}>
-									{#snippet toggle()}
-										{@const start = event.start.getHours() * 60 + event.start.getMinutes()}
-										{@const end = event.end.getHours() * 60 + event.end.getMinutes()}
-										<div
-											class="event"
-											style:top="{start / 14.4}%"
-											style:height="{(end - start) / 14.4}%"
-											style="--event-color:{decodeColor(
-												event.color ||
-													event.calendar!.color ||
-													encodeColor(colorHashHex(event.calendar!.name), true)
-											)}"
-										>
-											<span>{event.summary}</span>
-											<span class="subtle">{formatEventTimes(event)}</span>
-										</div>
-									{/snippet}
-
-									<div class="event-actions">
-										<button
-											class="reset"
-											onclick={() => {
-												eventEditId = event.id;
-												eventEditCalId = event.calId;
-												eventInit = event;
-											}}
-											command="show-modal"
-											commandfor="event-init"><Icon i="pencil" /></button
-										>
-										<button
-											class="reset"
-											onclick={() => (eventEditId = event.id)}
-											command="show-modal"
-											commandfor="event-delete"><Icon i="trash-can" /></button
-										>
-										<button class="reset" command="hide-popover" commandfor="event-popover:{event.id}"
-											><Icon i="xmark" /></button
-										>
-									</div>
-
-									<h3>{event.summary}</h3>
-
-									<div>
-										<Icon i="clock" />
-										<span>
-											{#if event.start.getDate() == event.end.getDate()}
-												{event.start.toLocaleDateString()}, {formatEventTimes(event)}
-											{:else if event.isAllDay}
-												{event.start.toLocaleDateString()} - {event.end.toLocaleDateString()}
-											{:else}
-												{event.start.toLocaleString()} - {event.end.toLocaleString()}
-											{/if}
-										</span>
-									</div>
-
-									{#if event.location}
-										<div>
-											<Icon i="location-dot" />
-											<span>{event.location}</span>
-										</div>
-									{/if}
-
-									<div>
-										<Icon i="calendar" />
-										<span>
-											{#if event.calendar}
-												{event.calendar.name}
-											{:else}
-												<i>Unknown Calendar</i>
-											{/if}
-										</span>
-									</div>
-
-									{#if event.attendees.length}
-										<div class="attendees-container">
-											<Icon i="user-group" />
-											<div class="attendees">
-												{#each event.attendees ?? [] as attendee (attendee.email)}
-													<div class="attendee">{attendee.email}</div>
-												{/each}
-											</div>
-										</div>
-									{/if}
-
-									{#if event.description}
-										<div class="description">
-											<Icon i="block-quote" />
-											<span>{event.description}</span>
-										</div>
-									{/if}
-								</Popover>
+								<Cal.Event bind:eventEditId bind:eventEditCalId bind:eventInit {event} />
+							{/each}
+
+							{#each recurringEvents.flatMap(ev => ev.recurrences
+									.filter(r => r.getFullYear() == day.getFullYear() && r.getMonth() == day.getMonth() && r.getDate() == day.getDate())
+									.map( r => [ev, { ...ev, start: r, end: new Date(r.getTime() + ev.end.getTime() - ev.start.getTime()) }] )) as [initData, event]}
+								<Cal.Event bind:eventEditId bind:eventEditCalId bind:eventInit {event} {initData} />
 							{/each}
 
 							{#if today.getTime() == day.getTime()}
@@ -328,8 +273,22 @@
 				</label>
 				<label for="eventInit.isAllDay:checkbox">All day</label>
 				<div class="spacing"></div>
-				<select class="recurrence">
-					<!-- @todo -->
+				<select name="recurrence" bind:value={eventInit.recurrence}>
+					<option value="">Does not repeat</option>
+					<option value="FREQ=DAILY">Every day</option>
+					<option value="FREQ=WEEKLY;BYDAY={toByDay(eventInit.start)}">
+						Every week on {longWeekDay(eventInit.start)}
+					</option>
+					<option value="FREQ=MONTHLY;BYDAY={Math.ceil(eventInit.start.getDate() / 7) + toByDay(eventInit.start)}"
+						>Every month on the {weekDayOfMonth(eventInit.start)}
+					</option>
+					<option value="FREQ=MONTHLY;BYMONTHDAY={eventInit.start.getDate()}">
+						Every month on the {withOrdinalSuffix(eventInit.start.getDate())}
+					</option>
+					<option value="FREQ=YEARLY;BYMONTH={eventInit.start.getMonth()};BYMONTHDAY={eventInit.start.getDate()}">
+						Every year on {eventInit.start.toLocaleDateString('default', { month: 'long', day: 'numeric' })}
+					</option>
+					<!-- @todo <option value="">Custom</option> -->
 				</select>
 			</div>
 		</div>
@@ -465,15 +424,18 @@
 
 	:global {
 		#event-init form {
-			width: 25em;
-
 			.event-time-options {
 				display: flex;
 				align-items: center;
 				gap: 0.5em;
 
-				.spacing {
-					flex-grow: 1;
+				.spacing,
+				select {
+					flex: auto;
+				}
+
+				label {
+					flex: none;
 				}
 			}
 
@@ -608,43 +570,6 @@
 					}
 				}
 			}
-
-			.event {
-				width: calc(100% - 0.5em);
-				position: absolute;
-				border-radius: 0.5em;
-				padding: 0.25em;
-				background-color: var(--event-color, var(--bg-alt));
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				justify-content: flex-start;
-				container-type: size;
-				overflow: hidden;
-
-				@container (height < 2.5em) {
-					.subtle {
-						display: none;
-					}
-				}
-
-				:global(& + :popover-open) {
-					gap: 0.75em;
-					padding: 1em;
-
-					.event-actions {
-						display: flex;
-						align-items: center;
-						justify-content: flex-end;
-						gap: 0.25em;
-
-						button {
-							padding: 0.5em;
-							border-radius: 0.5em;
-						}
-					}
-				}
-			}
 		}
 	}
 </style>