back to the good old days

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

@@ -0,0 +1,66 @@
+"use client"
+import { useState } from "react";
+import { CalendarMonthModel } from "./calendarMonthUtils";
+import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
+import Day from "./Day";
+
+export default function CalendarMonth({
+  month,
+  localCourse,
+}: {
+  month: CalendarMonthModel;
+  localCourse: LocalCourse;
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const isInPast =
+    new Date(month.year, month.month - 1, 1) < new Date(Date.now());
+  const monthName = new Date(month.year, month.month - 1, 1).toLocaleString(
+    "default",
+    { month: "long" }
+  );
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+  // const collapseClass = isInPast ? "collapse _hide" : "collapse _show";
+  const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek);
+
+  return (
+    <>
+      <h3 className="text-center">
+        <button
+          type="button"
+          className="btn btn-link"
+          onClick={toggleCollapse}
+          aria-expanded={!isCollapsed}
+          aria-controls={monthName}
+        >
+          {monthName}
+        </button>
+      </h3>
+
+      <div id={monthName}>
+        <div className="grid grid-cols-7 text-center fw-bold">
+          {weekDaysList.map((day) => (
+            <div
+              key={day}
+              className={
+                localCourse?.settings.daysOfWeek.includes(day)
+                  ? "col"
+                  : "col text-secondary"
+              }
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+
+        {month.daysByWeek.map((week, weekIndex) => (
+          <div className="grid grid-cols-7 m-3" key={weekIndex}>
+            {week.map((day, dayIndex) => (
+              <Day key={dayIndex} day={day} month={month.month} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+"use client"
+export default function Day({ day, month }: { day: Date; month: number }) {
+  const classes = "border rounded rounded-3 p-2 pb-4 m-1 ";
+
+  const backgroundClass = day.getMonth() + 1 != month ? "" : "bg-slate-900";
+
+  return (
+    <div className={classes + " " + backgroundClass}>
+      {day.getDate()}
+      {/* <div>{day.getMonth()}</div> */}
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/calendar/calendarMonthUtils.ts

@@ -0,0 +1,62 @@
+"use client"
+export interface CalendarMonthModel {
+  year: number;
+  month: number;
+  weeks: number[][];
+  daysByWeek: (Date)[][];
+}
+
+function weeksInMonth(year: number, month: number): number {
+  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
+  const daysInMonth = new Date(year, month, 0).getDate();
+  const longDaysInMonth = daysInMonth + firstDayOfMonth;
+  let weeks = Math.floor(longDaysInMonth / 7);
+  if (longDaysInMonth % 7 > 0) {
+    weeks += 1;
+  }
+  return weeks;
+}
+
+function createCalendarMonth(year: number, month: number): CalendarMonthModel {
+  const weeksNumber = weeksInMonth(year, month);
+  const daysInMonth = new Date(year, month, 0).getDate();
+
+  let currentDay = 1;
+  const firstDayOfMonth = new Date(year, month - 1, 1).getDay();
+
+  const daysByWeek = Array.from({ length: weeksNumber }).map((_, weekIndex) =>
+    Array.from({ length: 7 }).map((_, dayIndex) => {
+      if (weekIndex === 0 && dayIndex < firstDayOfMonth) {
+        return new Date(year, month - 1, dayIndex - firstDayOfMonth + 1);
+      } else if (currentDay <= daysInMonth) {
+        return new Date(year, month - 1, currentDay++);
+      } else {
+        currentDay++;
+        return new Date(year, month, currentDay - daysInMonth);
+      }
+    })
+  );
+
+  const weeks = daysByWeek.map((week) => week.map((day) => day.getDate()));
+
+  return { year, month, weeks, daysByWeek };
+}
+
+export function getMonthsBetweenDates(
+  startDate: Date,
+  endDate: Date
+): CalendarMonthModel[] {
+  const monthsInTerm =
+    1 +
+    (endDate.getFullYear() - startDate.getFullYear()) * 12 +
+    endDate.getMonth() -
+    startDate.getMonth();
+
+  return Array.from({ length: monthsInTerm }, (_, monthDiff) => {
+    const month = ((startDate.getMonth() + monthDiff) % 12) + 1;
+    const year =
+      startDate.getFullYear() +
+      Math.floor((startDate.getMonth() + monthDiff) / 12);
+    return createCalendarMonth(year, month);
+  });
+}