Finish loader for event calendar

app/routes/events-calendar.tsx

@@ -1,31 +1,57 @@
 import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
 import { Calendar, dayjsLocalizer } from "react-big-calendar";
 import dayjs from "dayjs";
+import { type LinksFunction } from "@remix-run/cloudflare";
 import { Container } from "@chakra-ui/react";
+import { useLoaderData } from "@remix-run/react";
+
+export const links: LinksFunction = () => {
+  return [{ href: calendarStyles, rel: "stylesheet" }];
+};
 
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
-  const eventsData = await context.env.D1.prepare("SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day;")
+  const eventsData = await context.env.D1.prepare(
+    "SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day;",
+  )
     .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
     .all();
 
-  if (eventsData.error) throw new Response(null, {
+  if (eventsData.error)
-    status: 500,
+    throw new Response(null, {
-  });
+      status: 500,
+    });
 
-  const eventList = eventsData.results.map(e => {
+  const calendarData = eventsData.results.map((e) => {
     return {
       id: e.id,
       title: (e.type as string).toUpperCase(),
       allDay: true,
-      start: new Date(e.year, e.month, e.day),
+      start: new Date(
-      end: new Date(e.year, e.month, e.day)
+        e.year as number,
-    }
+        (e.month as number) - 1,
-  })
+        e.day as number,
+      ),
+      end: new Date(e.year as number, (e.month as number) - 1, e.day as number),
+    };
+  });
+
+  return {
+    calendarData,
+    eventList: eventsData.results,
+  };
 }
 
 export default function () {
+  const data = useLoaderData<typeof loader>();
+
   return (
-    <Calendar localizer={dayjsLocalizer(dayjs)} style={{ height: 500 }} />
+    <Container maxW="container.lg" h="600px">
-  )
+      <Calendar
+        events={data?.eventList}
+        localizer={dayjsLocalizer(dayjs)}
+        style={{ height: 500 }}
+      />
+    </Container>
+  );
 }