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

166
components/calendar/CalendarViewMonth.tsx Normal file
View File

@@ -0,0 +1,166 @@
import { Calendar, CalendarEvent } from '/lib/models/calendar.ts';
import { getCalendarEventStyle, getWeeksForMonth } from '/lib/utils/calendar.ts';
interface CalendarViewWeekProps {
startDate: Date;
visibleCalendars: Calendar[];
calendarEvents: CalendarEvent[];
onClickAddEvent: (startDate?: Date, isAllDay?: boolean) => void;
onClickOpenEvent: (calendarEvent: CalendarEvent) => void;
timezoneId: string;
}
export default function CalendarViewWeek(
{ startDate, visibleCalendars, calendarEvents, onClickAddEvent, onClickOpenEvent, timezoneId }: CalendarViewWeekProps,
) {
const today = new Date().toISOString().substring(0, 10);
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
});
const weeks = getWeeksForMonth(new Date(startDate));
return (
<section class='shadow-md flex flex-auto flex-col rounded-md'>
<section class='grid grid-cols-7 gap-px border-b border-slate-500 bg-slate-700 text-center text-xs font-semibold text-white flex-none rounded-t-md'>
<div class='flex justify-center bg-gray-900 py-2 rounded-tl-md'>
<span>Mon</span>
</div>
<div class='flex justify-center bg-gray-900 py-2'>
<span>Tue</span>
</div>
<div class='flex justify-center bg-gray-900 py-2'>
<span>Wed</span>
</div>
<div class='flex justify-center bg-gray-900 py-2'>
<span>Thu</span>
</div>
<div class='flex justify-center bg-gray-900 py-2'>
<span>Fri</span>
</div>
<div class='flex justify-center bg-gray-900 py-2'>
<span>Sat</span>
</div>
<div class='flex justify-center bg-gray-900 py-2 rounded-tr-md'>
<span>Sun</span>
</div>
</section>
<section class='flex bg-slate-500 text-xs text-white flex-auto rounded-b-md'>
<section class='w-full grid grid-cols-7 grid-rows-5 gap-px rounded-b-md'>
{weeks.map((week, weekIndex) =>
week.map((day, dayIndex) => {
const shortIsoDate = day.date.toISOString().substring(0, 10);
const startDayDate = new Date(shortIsoDate);
const endDayDate = new Date(shortIsoDate);
endDayDate.setUTCHours(23);
endDayDate.setUTCMinutes(59);
endDayDate.setUTCSeconds(59);
endDayDate.setUTCMilliseconds(999);
const isBottomLeftDay = weekIndex === weeks.length - 1 && dayIndex === 0;
const isBottomRightDay = weekIndex === weeks.length - 1 && dayIndex === week.length - 1;
const isToday = today === shortIsoDate;
const dayEvents = calendarEvents.filter((calendarEvent) => {
const eventStartDate = new Date(calendarEvent.startDate);
const eventEndDate = new Date(calendarEvent.endDate);
// Event starts and ends on this day
if (eventStartDate >= startDayDate && eventEndDate <= endDayDate) {
return true;
}
// Event starts before and ends after this day
if (eventStartDate <= startDayDate && eventEndDate >= endDayDate) {
return true;
}
// Event starts on and ends after this day
if (
eventStartDate >= startDayDate && eventStartDate <= endDayDate && eventEndDate >= endDayDate
) {
return true;
}
// Event starts before and ends on this day
if (
eventStartDate <= startDayDate && eventEndDate >= startDayDate && eventEndDate <= endDayDate
) {
return true;
}
return false;
});
return (
<section
class={`relative ${day.isSameMonth ? 'bg-slate-600' : 'bg-slate-700'} min-h-16 px-3 py-2 ${
day.isSameMonth ? '' : 'text-slate-100'
} ${isBottomLeftDay ? 'rounded-bl-md' : ''} ${isBottomRightDay ? 'rounded-br-md' : ''}`}
>
<time
datetime={shortIsoDate}
class={`cursor-pointer ${
isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-[#51A4FB] font-semibold' : ''
}`}
onClick={() => onClickAddEvent(new Date(`${shortIsoDate}T09:00`))}
title='Add a new event'
>
{day.date.getUTCDate()}
</time>
{dayEvents.length > 0
? (
<ol class='mt-2'>
{[...dayEvents].slice(0, 2).map((dayEvent) => (
<li class='mb-1'>
<a
href='javascript:void(0);'
class={`flex px-2 py-1 rounded-md hover:no-underline hover:opacity-60`}
style={getCalendarEventStyle(dayEvent, visibleCalendars)}
onClick={() => onClickOpenEvent(dayEvent)}
>
<time
datetime={new Date(dayEvent.startDate).toISOString()}
class='mr-2 flex-none text-slate-100 block'
>
{hourFormat.format(new Date(dayEvent.startDate))}
</time>
<p class='flex-auto truncate font-medium text-white'>
{dayEvent.title}
</p>
</a>
</li>
))}
{dayEvents.length > 2
? (
<li class='mb-1'>
<a
href={`/calendar/view=day&startDate=${shortIsoDate}`}
class='flex bg-gray-700 px-2 py-1 rounded-md hover:no-underline hover:opacity-60'
target='_blank'
>
<p class='flex-auto truncate font-medium text-white'>
...{dayEvents.length - 2} more event{dayEvents.length - 2 === 1 ? '' : 's'}
</p>
</a>
</li>
)
: null}
</ol>
)
: null}
</section>
);
})
)}
</section>
</section>
</section>
);
}