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

Dynamically render calendar with mock data

Browse Source
This commit is contained in:
Bruno Bernardino
2024-03-17 14:32:47 +00:00
parent cfed77c2d4
commit 8b131d7855
3 changed files with 200 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
islands/calendar/MainCalendar.tsx
View File

@@ -2,7 +2,7 @@ import { useSignal } from '@preact/signals';
import { useEffect } from 'preact/hooks';
import { Calendar, CalendarEvent } from '/lib/types.ts';
import { baseUrl, capitalizeWord } from '/lib/utils.ts';
import { baseUrl, capitalizeWord, getWeeksForMonth } from '/lib/utils.ts';
// import { RequestBody as GetRequestBody, ResponseBody as GetResponseBody } from '/routes/api/contacts/get.tsx';
// import { RequestBody as AddRequestBody, ResponseBody as AddResponseBody } from '/routes/api/contacts/add.tsx';
// import { RequestBody as DeleteRequestBody, ResponseBody as DeleteResponseBody } from '/routes/api/contacts/delete.tsx';
@@ -28,6 +28,8 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
const hourFormat = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' });
const today = new Date().toISOString().substring(0, 10);
function onClickAddEvent() {
if (isAdding.value) {
@@ -113,7 +115,6 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
}
function onClickChangeStartDate(changeTo: 'previous' | 'next' | 'today') {
const today = new Date().toISOString().substring(0, 10);
const previousDay = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() - 1)).toISOString()
.substring(0, 10);
const nextDay = new Date(new Date(startDate).setUTCDate(new Date(startDate).getUTCDate() + 1)).toISOString()
@@ -315,6 +316,11 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
const visibleCalendars = calendars.value.filter((calendar) => calendar.is_visible);
const visibleCalendarEvents = calendarEvents.value;
// TODO: Send in / consider user timezone
const weeks = getWeeksForMonth(new Date(startDate));
return (
<>
<section class='flex flex-row items-center justify-between mb-4'>
@@ -497,7 +503,7 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
<section class='mx-auto max-w-7xl my-8'>
<section>
<section class='shadow-md lg:flex lg:flex-auto lg:flex-col rounded-md'>
<div class='grid grid-cols-7 gap-px border-b border-slate-500 bg-slate-700 text-center text-xs font-semibold text-white lg:flex-none rounded-t-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 lg:flex-none rounded-t-md'>
<div class='flex justify-center bg-gray-900 py-2 rounded-tl-md'>
<span>M</span>
<span class='sr-only sm:not-sr-only'>on</span>
@@ -526,165 +532,94 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
<span>S</span>
<span class='sr-only sm:not-sr-only'>un</span>
</div>
</div>
<div class='flex bg-slate-500 text-xs leading-6 text-white lg:flex-auto rounded-b-md'>
<div class='w-full grid lg:grid-cols-7 lg:grid-rows-5 lg:gap-px rounded-b-md'>
<div class='relative bg-slate-700 px-3 py-2 text-slate-100'>
<time datetime='2024-02-28'>26</time>
</div>
<div class='relative bg-slate-700 px-3 py-2 text-slate-100'>
<time datetime='2024-02-28'>27</time>
</div>
<div class='relative bg-slate-700 px-3 py-2 text-slate-100'>
<time datetime='2024-02-28'>28</time>
</div>
<div class='relative bg-slate-700 px-3 py-2 text-slate-100'>
<time datetime='2024-02-29'>29</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-01'>1</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-02'>2</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-03'>3</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-04'>4</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-05'>5</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-06'>6</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-07'>7</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-08'>8</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-09'>9</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-10'>10</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-11'>11</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-12'>12</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-13'>13</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-14'>14</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-15'>15</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-16'>16</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time
datetime='2024-03-17'
class='flex h-6 w-6 items-center justify-center rounded-full bg-[#51A4FB] font-semibold'
>
17
</time>
<ol class='mt-2'>
<li class='mb-1'>
<a
href='#'
class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
</section>
<section class='flex bg-slate-500 text-xs leading-6 text-white lg:flex-auto rounded-b-md'>
<section class='w-full grid lg:grid-cols-7 lg:grid-rows-5 lg: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.setHours(23);
endDayDate.setMinutes(59);
endDayDate.setSeconds(59);
endDayDate.setMilliseconds(999);
const isBottomLeftDay = weekIndex === weeks.length - 1 && dayIndex === 0;
const isBottomRightDay = weekIndex === weeks.length - 1 && dayIndex === week.length - 1;
const isToday = today === shortIsoDate;
// TODO: Consider events that span multiple days
const dayEvents = calendarEvents.value.filter((calendarEvent) =>
new Date(calendarEvent.start_date) >= startDayDate &&
new Date(calendarEvent.end_date) <= endDayDate
);
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='2024-03-17T14:00'
class='mr-2 flex-none text-slate-100 block'
datetime={shortIsoDate}
class={`${
isToday
? 'flex h-6 w-6 items-center justify-center rounded-full bg-[#51A4FB] font-semibold'
: ''
}`}
>
14:00
{day.date.getDate()}
</time>
<p class='flex-auto truncate font-medium text-white'>
Dentist
</p>
</a>
</li>
<li class='mb-1'>
<a
href='#'
class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
>
<time
datetime='2024-03-17T16:30'
class='mr-2 flex-none text-slate-100 block'
>
16:30
</time>
<p class='flex-auto truncate font-medium text-white'>
Dermatologist
</p>
</a>
</li>
<li class='mb-1'>
<a
href='#'
class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
>
<p class='flex-auto truncate font-medium text-white'>
...3 more events
</p>
</a>
</li>
</ol>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-18'>18</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-19'>19</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-20'>20</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-21'>21</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-22'>22</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-23'>23</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-24'>24</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-25'>25</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-26'>26</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-27'>27</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-28'>28</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-29'>29</time>
</div>
<div class='relative bg-slate-600 px-3 py-2'>
<time datetime='2024-03-30'>30</time>
</div>
<div class='relative bg-slate-600 px-3 py-2 rounded-br-md'>
<time datetime='2024-03-31'>31</time>
</div>
</div>
</div>
{dayEvents.length > 0
? (
<ol class='mt-2'>
{[...dayEvents].slice(0, 2).map((dayEvent) => (
<li class='mb-1'>
<a
href='#'
class={`flex px-2 py-0 rounded-md hover:no-underline hover:opacity-60 ${
visibleCalendars.find((calendar) => calendar.id === dayEvent.calendar_id)
?.color || 'bg-gray-700'
}`}
>
<time
datetime={new Date(dayEvent.start_date).toISOString()}
class='mr-2 flex-none text-slate-100 block'
>
{hourFormat.format(new Date(dayEvent.start_date))}
</time>
<p class='flex-auto truncate font-medium text-white'>
{dayEvent.title}
</p>
</a>
</li>
))}
{dayEvents.length > 2
? (
<li class='mb-1'>
<a
href='#'
class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
>
<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>
</section>

37
lib/utils.ts
View File

@@ -628,3 +628,40 @@ export function parseVCardFromTextContents(text: string): Partial<Contact>[] {
export const capitalizeWord = (string: string) => {
return `${string.charAt(0).toLocaleUpperCase()}${string.slice(1)}`;
};
// NOTE: Considers weeks starting Monday, not Sunday
export function getWeeksForMonth(date: Date): { date: Date; isSameMonth: boolean }[][] {
const year = date.getFullYear();
const month = date.getMonth();
const firstOfMonth = new Date(year, month, 1);
const lastOfMonth = new Date(year, month + 1, 0);
const daysToShow = firstOfMonth.getDay() + (firstOfMonth.getDay() === 0 ? 6 : -1) + lastOfMonth.getDate();
const weekCount = Math.ceil(daysToShow / 7);
const weeks: { date: Date; isSameMonth: boolean }[][] = [];
const startingDate = new Date(firstOfMonth);
startingDate.setDate(
startingDate.getDate() - Math.abs(firstOfMonth.getDay() === 0 ? 6 : (firstOfMonth.getDay() - 1)),
);
for (let weekIndex = 0; weeks.length < weekCount; ++weekIndex) {
for (let dayIndex = 0; dayIndex < 7; ++dayIndex) {
if (!Array.isArray(weeks[weekIndex])) {
weeks[weekIndex] = [];
}
const weekDayDate = new Date(startingDate);
weekDayDate.setDate(weekDayDate.getDate() + (dayIndex + weekIndex * 7));
const isSameMonth = weekDayDate.getMonth() === month;
weeks[weekIndex].push({ date: weekDayDate, isSameMonth });
}
}
return weeks;
}

72
routes/calendar.tsx
View File

@@ -8,14 +8,82 @@ async function getCalendars(userId: string): Promise<Pick<Calendar, 'id' | 'name
// TODO: Remove this
await new Promise((resolve) => setTimeout(() => resolve(true), 1));
return [];
return [
{
id: 'family-1',
name: 'Family',
color: 'bg-purple-500',
is_visible: true,
},
{
id: 'personal-1',
name: 'Personal',
color: 'bg-sky-600',
is_visible: true,
},
{
id: 'house-chores-1',
name: 'House Chores',
color: 'bg-red-700',
is_visible: true,
},
];
}
async function getCalendarEvents(userId: string, calendarIds: string[]): Promise<CalendarEvent[]> {
// TODO: Remove this
await new Promise((resolve) => setTimeout(() => resolve(true), 1));
return [];
return [
{
id: 'event-1',
user_id: userId,
calendar_id: 'family-1',
revision: 'fake-rev',
title: 'Dentist',
start_date: new Date('2024-03-17T14:00:00.000Z'),
end_date: new Date('2024-03-17T15:00:00.000Z'),
is_all_day: false,
status: 'scheduled',
extra: {
visibility: 'default',
},
updated_at: new Date(),
created_at: new Date(),
},
{
id: 'event-2',
user_id: userId,
calendar_id: 'personal-1',
revision: 'fake-rev',
title: 'Dermatologist',
start_date: new Date('2024-03-17T16:30:00.000Z'),
end_date: new Date('2024-03-17T17:30:00.000Z'),
is_all_day: false,
status: 'scheduled',
extra: {
visibility: 'default',
},
updated_at: new Date(),
created_at: new Date(),
},
{
id: 'event-3',
user_id: userId,
calendar_id: 'house-chores-1',
revision: 'fake-rev',
title: 'Vacuum',
start_date: new Date('2024-03-16T15:00:00.000Z'),
end_date: new Date('2024-03-16T16:00:00.000Z'),
is_all_day: false,
status: 'scheduled',
extra: {
visibility: 'default',
},
updated_at: new Date(),
created_at: new Date(),
},
];
}
interface Data {