@axium/calendar 0.1.4 → 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,30 @@
 					}
 				}
 			},
-			"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,
+			"alter_tables": {
+				"calendars": {
+					"add_columns": {
+						"color": { "type": "integer" }
+					}
+				},
+				"events": {
+					"add_columns": {
+						"color": { "type": "integer" }
+					}
+				}
+			}
 		}
 	],
 	"wipe": ["calendars", "events", "acl.calendars"],

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">`
  */
@@ -54,6 +59,7 @@ export declare const EventData: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -68,6 +74,7 @@ export declare const EventInit: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -89,6 +96,7 @@ export declare const Event: z.ZodObject<{
     end: z.ZodCoercedDate<unknown>;
     isAllDay: z.ZodCoercedBoolean<unknown>;
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -117,6 +125,7 @@ export declare const Calendar: z.ZodObject<{
     id: z.ZodUUID;
     userId: z.ZodUUID;
     created: z.ZodCoercedDate<unknown>;
+    color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
     acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
         itemId: z.ZodUUID;
         userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -157,6 +166,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -185,6 +195,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -215,6 +226,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodNonOptional<z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -245,6 +257,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -273,6 +286,7 @@ declare const CalendarAPI: {
             id: z.ZodUUID;
             userId: z.ZodUUID;
             created: z.ZodCoercedDate<unknown>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             acl: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 itemId: z.ZodUUID;
                 userId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -309,6 +323,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -331,6 +346,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -349,6 +365,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -373,6 +390,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -395,6 +413,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -413,6 +432,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -435,6 +455,7 @@ declare const CalendarAPI: {
             end: z.ZodCoercedDate<unknown>;
             isAllDay: z.ZodCoercedBoolean<unknown>;
             description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            color: z.ZodOptional<z.ZodNullable<z.ZodCustomStringFormat<"hex">>>;
             recurrence: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             recurrenceExcludes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
             recurrenceId: z.ZodOptional<z.ZodNullable<z.ZodUUID>>;
@@ -456,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

@@ -1,6 +1,23 @@
 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);
@@ -26,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">`
  */
@@ -81,6 +105,7 @@ export const EventData = z.object({
     end: z.coerce.date(),
     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(),
@@ -111,6 +136,7 @@ export const Calendar = CalendarInit.extend({
     id: z.uuid(),
     userId: z.uuid(),
     created: z.coerce.date(),
+    color: Color.nullish(),
     acl: AccessControl.array().optional(),
 });
 export function getCalPermissionsInfo(cal, user) {
@@ -151,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

@@ -7,28 +7,37 @@ import { sql } from 'kysely';
 import { jsonArrayFrom, jsonObjectFrom } from 'kysely/helpers/postgres';
 import * as z from 'zod';
 import { Attendee, CalendarInit, EventFilter, EventInit } from './common.js';
+function withEncoded(value) {
+    return (value.color === undefined || value.color === null
+        ? value
+        : Object.assign(value, { color: value.color.toString(16).padStart(8, '0') }));
+}
+function withDecoded(value) {
+    return (value.color === undefined || value.color === null ? value : Object.assign(value, { color: parseInt(value.color, 16) }));
+}
 addRoute({
     path: '/api/users/:id/calendars',
     params: { id: z.uuid() },
     async GET(request, { id: userId }) {
         const { user } = await checkAuthForUser(request, userId);
-        return await database
+        const result = await database
             .selectFrom('calendars')
             .selectAll()
             .select(aclFrom('calendars'))
             .where(userHasAccess('calendars', user))
             .execute()
             .catch(withError('Could not get calendars'));
+        return result.map(c => withEncoded(c));
     },
     async PUT(request, { id: userId }) {
         const init = await parseBody(request, CalendarInit);
         await checkAuthForUser(request, userId);
-        return await database
+        return withEncoded(await database
             .insertInto('calendars')
             .values({ ...init, userId })
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not create calendar'));
+            .catch(withError('Could not create calendar')));
     },
 });
 addRoute({
@@ -36,27 +45,27 @@ addRoute({
     params: { id: z.uuid() },
     async GET(request, { id }) {
         const { item } = await authRequestForItem(request, 'calendars', id, { read: true });
-        return item;
+        return withEncoded(item);
     },
     async PATCH(request, { id }) {
         const body = await parseBody(request, CalendarInit);
         await authRequestForItem(request, 'calendars', id, { edit: true });
-        return await database
+        return withEncoded(await database
             .updateTable('calendars')
             .set(body)
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not update calendar'));
+            .catch(withError('Could not update calendar')));
     },
     async DELETE(request, { id }) {
         await authRequestForItem(request, 'calendars', id, { manage: true });
-        return await database
+        return withEncoded(await database
             .deleteFrom('calendars')
             .where('id', '=', id)
             .returningAll()
             .executeTakeFirstOrThrow()
-            .catch(withError('Could not delete calendar'));
+            .catch(withError('Could not delete calendar')));
     },
 });
 function withAttendees(eb) {
@@ -78,12 +87,16 @@ 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))
             .catch(withError('Could not get events'));
         for (const event of events)
-            event.calendar = calendar;
+            event.calendar = withEncoded(calendar);
         return events;
     },
     async PUT(request, { id }) {
@@ -93,7 +106,7 @@ addRoute({
         try {
             const event = await tx
                 .insertInto('events')
-                .values({ ...init, calId: id })
+                .values({ ...withDecoded(init), calId: id })
                 .returningAll()
                 .executeTakeFirstOrThrow()
                 .catch(withError('Could not create event'));
@@ -105,7 +118,11 @@ addRoute({
                     .execute()
                 : []);
             await tx.commit().execute();
-            return Object.assign(event, { attendees, calendar });
+            return Object.assign(event, {
+                attendees,
+                calendar: withEncoded(calendar),
+                color: event.color?.toString(16)?.padStart(8, '0'),
+            });
         }
         catch (e) {
             await tx.rollback().execute();
@@ -128,7 +145,7 @@ addRoute({
             .catch(withError('Event does not exist', 404));
         if (event.calendar.userId != userId && event.attendees.every(a => a.userId != userId))
             error(403, 'You do not have access to this event');
-        return event;
+        return withEncoded(event);
     },
     async PATCH(request, { id }) {
         const { attendees: attendeesInit = [], sendEmails, recurrenceUpdateAll, ...init } = await parseBody(request, EventInit);
@@ -145,7 +162,7 @@ addRoute({
         try {
             const event = await tx
                 .updateTable('events')
-                .set(init)
+                .set(withDecoded(init))
                 .where('id', '=', id)
                 .returningAll()
                 .returning(withAttendees)
@@ -173,7 +190,7 @@ addRoute({
                  */
             }
             await tx.commit().execute();
-            return event;
+            return withEncoded(event);
         }
         catch (e) {
             await tx.rollback().execute();
@@ -198,7 +215,7 @@ addRoute({
                 .where('id', '=', id)
                 .executeTakeFirstOrThrow();
             await tx.commit().execute();
-            return event;
+            return withEncoded(event);
         }
         catch (e) {
             await tx.rollback().execute();

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.1.4",
+	"version": "0.3.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {
@@ -36,12 +36,13 @@
 	},
 	"peerDependencies": {
 		"@axium/client": ">=0.14.3",
-		"@axium/core": ">=0.19.0",
+		"@axium/core": ">=0.20.0",
 		"@axium/server": ">=0.36.0",
 		"@sveltejs/kit": "^2.27.3",
-		"utilium": "^2.6.3"
+		"utilium": "^2.7.0"
 	},
 	"dependencies": {
+		"rrule": "^2.8.1",
 		"zod": "^4.0.5"
 	},
 	"axium": {

package/routes/calendar/+page.svelte

@@ -1,21 +1,38 @@
 <script lang="ts">
-	import { getEvents, type EventInitFormData } from '@axium/calendar/client';
-	import type { Event, EventData } from '@axium/calendar/common';
-	import { AttendeeInit, dateToInputValue, formatEventTimes, getCalPermissionsInfo, weekDaysFor } from '@axium/calendar/common';
-	import * as Calendar from '@axium/calendar/components';
+	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, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
+	import { AccessControlDialog, ColorPicker, FormDialog, Icon, Popover, UserDiscovery } from '@axium/client/components';
 	import { fetchAPI } from '@axium/client/requests';
+	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);
@@ -23,6 +40,7 @@
 	let events = $state<Event[]>([]);
 
 	$effect(() => {
+		for (const cal of calendars) cal.color ||= encodeColor(colorHashHex(cal.name));
 		getEvents(calendars, { start: new Date(start.getTime()), end: new Date(end.getTime()) }).then(e => (events = e));
 	});
 
@@ -31,27 +49,37 @@
 	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>>({});
 
-	let eventInit = $state<EventData & { attendees: AttendeeInit[] }>({
-			attendees: [],
-			recurrenceExcludes: [],
-			recurrenceId: null,
-			calId: calendars[0]?.id,
-		} as any),
+	const defaultEventInit = $derived<any>({
+		attendees: [],
+		recurrenceExcludes: [],
+		recurrenceId: null,
+		calId: calendars[0]?.id,
+		start: new Date(defaultStart),
+		end: new Date(defaultStart.getTime() + 3600_000),
+	});
+
+	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>
 
 <svelte:head>
@@ -79,7 +107,7 @@
 		<span class="label">{weekDays[0].toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
 	</div>
 	<div id="cal-list">
-		<Calendar.Select bind:start bind:end />
+		<Cal.Select bind:start bind:end />
 		<div class="cal-list-header">
 			<h4>My Calendars</h4>
 			<button style:display="contents" command="show-modal" commandfor="add-calendar">
@@ -156,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">
@@ -166,89 +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}%">
-											<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()}
@@ -265,7 +225,7 @@
 <FormDialog
 	id="event-init"
 	clearOnCancel
-	cancel={() => (eventInit = {} as any)}
+	cancel={() => (eventInit = defaultEventInit)}
 	submitText={eventEditId ? 'Update' : 'Create'}
 	submit={async (data: EventInitFormData) => {
 		Object.assign(eventInit, data);
@@ -313,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>
@@ -327,6 +301,7 @@
 				<option value={cal.id}>{cal.name}</option>
 			{/each}
 		</select>
+		<ColorPicker bind:value={eventInit.color} defaultValue={defaultEventColor} />
 	</div>
 
 	<div class="attendees-container">
@@ -449,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;
 				}
 			}
 
@@ -592,43 +570,6 @@
 					}
 				}
 			}
-
-			.event {
-				width: calc(100% - 0.5em);
-				position: absolute;
-				border-radius: 0.5em;
-				padding: 0.25em;
-				background-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>