feat: add calendar widget (#663)

* feat: add calendar widget * feat: add artifacts to gitignore
2024-07-02 12:13:13 +02:00
parent 83ee03b192
commit dba97a3bd6
37 changed files with 707 additions and 9 deletions
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { Calendar } from "@mantine/dates";
+import dayjs from "dayjs";
+
+import type { WidgetComponentProps } from "../definition";
+import { CalendarDay } from "./calender-day";
+import classes from "./component.module.css";
+
+export default function CalendarWidget({ isEditMode, serverData }: WidgetComponentProps<"calendar">) {
+  const [month, setMonth] = useState(new Date());
+  const params = useParams();
+  const locale = params.locale as string;
+
+  return (
+    <Calendar
+      defaultDate={new Date()}
+      onPreviousMonth={setMonth}
+      onNextMonth={setMonth}
+      locale={locale}
+      hideWeekdays={false}
+      date={month}
+      maxLevel="month"
+      w="100%"
+      h="100%"
+      static={isEditMode}
+      className={classes.calendar}
+      styles={{
+        calendarHeaderControl: {
+          pointerEvents: isEditMode ? "none" : undefined,
+          height: "12cqmin",
+          width: "12cqmin",
+          borderRadius: "3.5cqmin",
+        },
+        calendarHeaderLevel: {
+          height: "12cqmin",
+          fontSize: "6cqmin",
+          pointerEvents: "none",
+        },
+        levelsGroup: {
+          height: "100%",
+          padding: "2.5cqmin",
+        },
+        calendarHeader: {
+          maxWidth: "unset",
+          marginBottom: 0,
+        },
+        day: {
+          width: "12cqmin",
+          height: "12cqmin",
+          borderRadius: "3.5cqmin",
+        },
+        monthCell: {
+          textAlign: "center",
+        },
+        month: {
+          height: "100%",
+        },
+        weekday: {
+          fontSize: "5.5cqmin",
+          padding: 0,
+        },
+      }}
+      renderDay={(date) => {
+        const eventsForDate = (serverData?.initialData ?? []).filter((event) => dayjs(event.date).isSame(date, "day"));
+        return <CalendarDay date={date} events={eventsForDate} disabled={isEditMode} />;
+      }}
+    />
+  );
+}