sirtimbly/bewcloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic CalDav UI (Calendar)

Browse Source 
This implements a basic CalDav UI, titled "Calendar". It allows creating new calendars and events with a start and end date, URL, location, and description.

You can also import and export ICS (VCALENDAR + VEVENT) files.

It allows editing the ICS directly, for power users.

Additionally, you can hide/display events from certain calendars, change their names and their colors. If there's no calendar created yet in your CalDav server (first-time setup), it'll automatically create one, titled "Calendar".

You can also change the display timezone for the calendar from the settings.

Finally, there's some minor documentation fixes and some other minor tweaks.

Closes #56
Closes #89
This commit is contained in:
Bruno Bernardino
2025-09-06 12:46:13 +01:00
parent f14c40d05d
commit 15dcc8803d
39 changed files with 6483 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
components/calendar/ViewEventModal.tsx Normal file
View File

@@ -0,0 +1,159 @@
import { Calendar, CalendarEvent } from '/lib/models/calendar.ts';
import { convertRRuleToWords } from '/lib/utils/calendar.ts';
interface ViewEventModalProps {
isOpen: boolean;
calendarEvent: CalendarEvent;
calendar: Calendar;
onClickDelete: (eventId: string) => void;
onClose: () => void;
timezoneId: string;
}
export default function ViewEventModal(
{ isOpen, calendarEvent, calendar, onClickDelete, onClose, timezoneId }: ViewEventModalProps,
) {
if (!calendarEvent || !calendar) {
return null;
}
const allDayEventDateFormat = new Intl.DateTimeFormat('en-GB', {
year: 'numeric',
month: 'long',
day: 'numeric',
timeZone: timezoneId, // Calendar dates are parsed without timezone info, so we need to force to a specific one so it's consistent across db, server, and client
});
const hourFormat = new Intl.DateTimeFormat('en-GB', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
timeZone: timezoneId, // Calendar dates are parsed without timezone info, so we need to force to a specific one so it's consistent across db, server, and client
});
return (
<>
<section
class={`fixed ${isOpen ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
>
</section>
<section
class={`fixed ${
isOpen ? 'block' : 'hidden'
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 min-w-96 max-w-lg bg-slate-600 text-white rounded-md px-8 py-6 drop-shadow-lg overflow-y-scroll max-h-[80%]`}
>
<h1 class='text-2xl font-semibold my-5'>{calendarEvent.title}</h1>
<header class='py-5 border-t border-b border-slate-500 font-semibold flex justify-between items-center'>
<span>
{calendarEvent.startDate ? allDayEventDateFormat.format(new Date(calendarEvent.startDate)) : ''}
</span>
{calendarEvent.isAllDay ? <span>All-day</span> : (
<span>
{calendarEvent.startDate ? hourFormat.format(new Date(calendarEvent.startDate)) : ''} -{' '}
{calendarEvent.endDate ? hourFormat.format(new Date(calendarEvent.endDate)) : ''}
</span>
)}
</header>
<section class='py-5 my-0 border-b border-slate-500 flex justify-between items-center'>
<span>
{calendar.displayName}
</span>
<span
class={`w-5 h-5 ml-2 block rounded-full`}
title={calendar.calendarColor}
style={{ backgroundColor: calendar.calendarColor }}
/>
</section>
{calendarEvent.description
? (
<section class='py-5 my-0 border-b border-slate-500'>
<article class='overflow-auto max-w-full max-h-80 font-mono text-sm whitespace-pre-wrap'>
{calendarEvent.description}
</article>
</section>
)
: null}
{calendarEvent.eventUrl
? (
<section class='py-5 my-0 border-b border-slate-500'>
<a href={calendarEvent.eventUrl} target='_blank' rel='noopener noreferrer'>
{calendarEvent.eventUrl}
</a>
</section>
)
: null}
{calendarEvent.location
? (
<section class='py-5 my-0 border-b border-slate-500'>
<a
href={`https://maps.google.com/maps?q=${encodeURIComponent(calendarEvent.location)}`}
target='_blank'
rel='noopener noreferrer'
>
{calendarEvent.location}
</a>
</section>
)
: null}
{Array.isArray(calendarEvent.attendees) && calendarEvent.attendees.length > 0
? (
<section class='py-5 my-0 border-b border-slate-500'>
{calendarEvent.attendees.map((attendee) => (
<p class='my-1'>
<a href={`mailto:${attendee.email}`} target='_blank' rel='noopener noreferrer'>
{attendee.name || attendee.email}
</a>{' '}
- {attendee.status}
</p>
))}
</section>
)
: null}
{calendarEvent.isRecurring && calendarEvent.recurringRrule
? (
<section class='py-5 my-0 border-b border-slate-500'>
<p class='text-xs'>
Repeats {convertRRuleToWords(calendarEvent.recurringRrule, { capitalizeSentence: false })}.
</p>
</section>
)
: null}
{Array.isArray(calendarEvent.reminders) && calendarEvent.reminders.length > 0
? (
<section class='py-5 my-0 border-b border-slate-500'>
{calendarEvent.reminders.map((reminder) => (
<p class='my-1 text-xs'>
{reminder.description || 'Reminder'} at {hourFormat.format(new Date(reminder.startDate))} via{' '}
{reminder.type}.
</p>
))}
</section>
)
: null}
<footer class='flex justify-between mt-2'>
<button
type='button'
class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md'
onClick={() => onClickDelete(calendarEvent.uid!)}
>
Delete
</button>
<a
href={`/calendar/${calendarEvent.uid}?calendarId=${calendar.uid}`}
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
target='_blank'
>
Edit
</a>
<button
type='button'
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
onClick={() => onClose()}
>
Close
</button>
</footer>
</section>
</>
);
}