feat(calendar): add academic week number

one-zero-eight · Sep 23, 2024 · e8e9076 · e8e9076
1 parent f201e85
commit e8e9076
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/app/globals-calendar.css b/app/globals-calendar.css
@@ -88,7 +88,7 @@
   }
 
   .fc-list-day-side-text {
-    @apply font-medium;
+    @apply min-h-full align-bottom font-light text-gray-600 dark:text-gray-500;
   }
 
   .fc-daygrid-day-events {

diff --git a/components/common/calendar/Calendar.tsx b/components/common/calendar/Calendar.tsx
@@ -151,10 +151,21 @@ function Calendar({
         views={{
           listMonth: {
             eventContent: renderEventListMonth,
+            listDayFormat: (arg) => {
+              if (arg.date.year === new Date().getFullYear()) {
+                // Show month, day, weekday
+                return moment(arg.date).format("MMMM D, dddd");
+              } else {
+                // Add year if not current year
+                return moment(arg.date).format("YYYY, MMMM D");
+              }
+            },
+            listDaySideFormat: (arg) =>
+              `Week ${calculateWeek(moment(arg.date).toDate())}`,
           },
           timeGridWeek: {
             eventContent: renderEventTimeGridWeek,
-            weekNumbers: false,
+            weekNumbers: true,
             // Show weekday and date in day header
             dayHeaderContent: (arg) => {
               if (!arg.isToday) {
@@ -175,7 +186,7 @@ function Calendar({
             type: "timeGrid",
             dayCount: 3,
             eventContent: renderEventTimeGridWeek,
-            weekNumbers: false,
+            weekNumbers: true,
             // Show weekday and date in day header
             dayHeaderContent: (arg) => {
               if (!arg.isToday) {
@@ -227,7 +238,7 @@ function Calendar({
         weekNumbers={true} // Display numbers of weeks
         weekNumberFormat={{ week: "long" }} // Show "Week 1", not "W1"
         weekNumberClassNames="text-sm week-cell" // Small text size
-        // weekNumberCalculation={calculateWeek} // Display academic week numbers
+        weekNumberCalculation={calculateWeek} // Display academic week numbers
         // height="100dvh" // Full height
         contentHeight="auto" // Do not add scrollbar
         stickyHeaderDates={false}
@@ -350,4 +361,18 @@ function renderEventDayGridMonth({
   );
 }
 
+function calculateWeek(date: Date) {
+  // Calculate academic week number
+  const semesterStart = new Date("2024-08-26").getTime(); // Monday, first day of first week
+  const semesterEnd = new Date("2024-12-30").getTime(); // Monday, the day after the last week
+
+  const time = date.getTime();
+  if (time < semesterStart || time >= semesterEnd) {
+    return Infinity; // Out of semester
+  }
+
+  const weekLength = 7 * 24 * 60 * 60 * 1000; // 7 days
+  return Math.floor((time - semesterStart) / weekLength) + 1;
+}
+
 export default Calendar;