diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx index d598408..b7ffe69 100644 --- a/app/routes/events-calendar.tsx +++ b/app/routes/events-calendar.tsx @@ -14,6 +14,7 @@ import { } from "@chakra-ui/react"; import { useLoaderData } from "@remix-run/react"; import { useState } from "react"; +import utc from "dayjs/plugin/utc.js"; export const links: LinksFunction = () => { return [ @@ -55,8 +56,8 @@ export async function loader({ context }: { context: RequestContext }) { title: (e.type as string).toUpperCase(), allDay: true, // A Date object will not survive being passed to the client - start: `${e.year}-${e.month}-${e.day}T00:00:00.000Z`, - end: `${e.year}-${e.month}-${e.day}T00:00:00.000Z`, + start: `${e.year}-${(e.month as number).toString().padStart(2, "0")}-${(e.day as number).toString().padStart(2, "0")}T00:00:00.000Z`, + end: `${e.year}-${(e.month as number).toString().padStart(2, "0")}-${(e.day as number).toString().padStart(2, "0")}T00:00:00.000Z`, }; }); @@ -79,22 +80,31 @@ export default function () { ) as { [k: string]: any }[]; }; + dayjs.extend(utc); + return ( { - // @ts-expect-error - event.end = new Date(event.end); - // @ts-expect-error - event.start = new Date(event.start); - - return event; - })} + endAccessor={(event) => new Date(event.end)} + events={data.calendarData} localizer={dayjsLocalizer(dayjs)} onSelectSlot={(s) => { setDate(s.slots.at(0) as Date); }} + startAccessor={(event) => { + const date = new Date(event.start); + date.setUTCDate(date.getUTCDate() + 1); + + return date; + }} style={{ height: 500 }} + views={{ + month: true, + week: false, + work_week: false, + day: false, + agenda: false, + }} />