fixing date formatting to month day year

nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx

@@ -4,13 +4,13 @@ import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
 import Day from "./Day";
 
-export default function CalendarMonth({
+export const CalendarMonth = ({
   month,
   localCourse,
 }: {
   month: CalendarMonthModel;
   localCourse: LocalCourse;
-}) {
+}) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const isInPast =

nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useCourseContext } from "../context/courseContext";
+import { getMonthsBetweenDates } from "./calendarMonthUtils";
+import { CalendarMonth } from "./CalendarMonth";
+
+export default function CourseCalendar() {
+  const context = useCourseContext();
+
+  const startDate = getDateFromStringOrThrow(
+    context.localCourse.settings.startDate,
+    "course start date"
+  );
+  const endDate = getDateFromStringOrThrow(
+    context.localCourse.settings.endDate,
+    "course end date"
+  );
+
+  const months = getMonthsBetweenDates(startDate, endDate);
+
+  return (
+    <>
+      {months.map((month) => (
+        <CalendarMonth
+          key={month.month + "" + month.year}
+          month={month}
+          localCourse={context.localCourse}
+        />
+      ))}
+    </>
+  );
+}

nextjs/src/app/course/[courseName]/calendar/Day.tsx

@@ -1,13 +1,68 @@
-"use client"
+"use client";
+
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import { useCourseContext } from "../context/courseContext";
+
 export default function Day({ day, month }: { day: Date; month: number }) {
-  const classes = "border rounded rounded-3 p-2 pb-4 m-1 ";
+  const context = useCourseContext();
 
   const backgroundClass = day.getMonth() + 1 != month ? "" : "bg-slate-900";
 
+  const todaysAssignments = context.localCourse.modules
+    .flatMap((m) => m.assignments)
+    .filter((a) => {
+      const dueDate = getDateFromStringOrThrow(
+        a.dueAt,
+        "due at for assignment in day"
+      );
+
+      const isSame =
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate();
+      if (a.name === "Chapter 3") console.log(a.name, dueDate, day, isSame);
+      return isSame;
+    });
+  const todaysQuizzes = context.localCourse.modules
+    .flatMap((m) => m.quizzes)
+    .filter((q) => {
+      const dueDate = getDateFromStringOrThrow(
+        q.dueAt,
+        "due at for quiz in day"
+      );
+      return (
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate()
+      );
+    });
+  const todaysPages = context.localCourse.modules
+    .flatMap((m) => m.pages)
+    .filter((p) => {
+      const dueDate = getDateFromStringOrThrow(
+        p.dueAt,
+        "due at for page in day"
+      );
+      return (
+        dueDate.getFullYear() === day.getFullYear() &&
+        dueDate.getMonth() === day.getMonth() &&
+        dueDate.getDate() === day.getDate()
+      );
+    });
   return (
-    <div className={classes + " " + backgroundClass}>
+    <div className={"border rounded rounded-3 p-2 pb-4 m-1 " + backgroundClass}>
       {day.getDate()}
-      {/* <div>{day.getMonth()}</div> */}
+      <ul className="list-disc ms-4">
+        {todaysAssignments.map((a) => (
+          <li key={a.name}> {a.name}</li>
+        ))}
+        {todaysQuizzes.map((q) => (
+          <li key={q.name}> {q.name}</li>
+        ))}
+        {todaysPages.map((p) => (
+          <li key={p.name}> {p.name}</li>
+        ))}
+      </ul>
     </div>
   );
 }