feat: make calendar look better

src/components/generator/Calendar/CalendarComponent.jsx

@@ -39,6 +39,7 @@ import {
   getCalendarViewNotificationMessage,
   getVisibleTimetables,
 } from "./utils/calendarViewUtils.js";
+import { buildSelectionPreviewEvents } from "./utils/selectionUtils.js";
 import { getFullCalendarConfig } from "./utils/calendarConfigUtils.js";
 import MultiLineSnackbar from "@/components/sitewide/MultiLineSnackbar";
 import { useIsMobile } from "@/lib/utils/screenSizeUtils";
@@ -71,11 +72,19 @@ export default function CalendarComponent({
   const [renameAnchorEl, setRenameAnchorEl] = useState(null);
   const [renameAnchorPosition, setRenameAnchorPosition] = useState(null);
   const [coursesForTimeline, setCoursesForTimeline] = useState([]);
+  const [selectionPreviewEvents, setSelectionPreviewEvents] = useState([]);
+  const selectionPreviewKeyRef = React.useRef("");
 
   const visibleTimetables = useMemo(
     () => getVisibleTimetables(timetables, viewRange),
     [timetables, viewRange],
   );
+  const calendarEvents = useMemo(() => {
+    if (selectionPreviewEvents.length === 0) {
+      return events;
+    }
+    return [...events, ...selectionPreviewEvents];
+  }, [events, selectionPreviewEvents]);
 
   // Screen size detection
   const isMobile = useIsMobile();
@@ -417,6 +426,7 @@ export default function CalendarComponent({
   };
 
   const handleSelect = (selectInfo) => {
+    clearSelectionPreview();
     handleCalendarSelection(
       selectInfo,
       setCurrentTimetableIndex,
@@ -429,9 +439,51 @@ export default function CalendarComponent({
     );
   };
 
-  const handleSelectAllow = (selectionInfo) => {
-    return true;
-  };
+  const clearSelectionPreview = useCallback(() => {
+    if (
+      selectionPreviewKeyRef.current !== "" ||
+      selectionPreviewEvents.length
+    ) {
+      selectionPreviewKeyRef.current = "";
+      setSelectionPreviewEvents([]);
+    }
+  }, [selectionPreviewEvents.length]);
+
+  const handleSelectAllow = useCallback(
+    (selectionInfo) => {
+      const start = selectionInfo?.start;
+      const end = selectionInfo?.end;
+
+      if (!start || !end) {
+        clearSelectionPreview();
+        return true;
+      }
+
+      const previewEvents = buildSelectionPreviewEvents(start, end);
+      if (previewEvents.length === 0) {
+        clearSelectionPreview();
+        return true;
+      }
+
+      const previewKey = previewEvents
+        .map(
+          (event) => `${event.start.toISOString()}-${event.end.toISOString()}`,
+        )
+        .join("|");
+
+      if (previewKey !== selectionPreviewKeyRef.current) {
+        selectionPreviewKeyRef.current = previewKey;
+        setSelectionPreviewEvents(previewEvents);
+      }
+
+      return true;
+    },
+    [clearSelectionPreview],
+  );
+
+  const handleUnselect = useCallback(() => {
+    clearSelectionPreview();
+  }, [clearSelectionPreview]);
 
   // Function to navigate the calendar to a specific date
   const navigateToDate = useCallback(
@@ -492,11 +544,12 @@ export default function CalendarComponent({
           {...getFullCalendarConfig({
             calendarRef,
             showWeekends,
-            events,
+            events: calendarEvents,
             handleDatesSet,
             handleEventClick,
             handleSelect,
             handleSelectAllow,
+            handleUnselect,
             handleEventMouseEnter,
             handleEventMouseLeave,
             isMobile,

src/components/generator/Calendar/utils/calendarConfigUtils.js

@@ -10,6 +10,7 @@ export const getFullCalendarConfig = ({
   handleEventClick,
   handleSelect,
   handleSelectAllow,
+  handleUnselect,
   handleEventMouseEnter,
   handleEventMouseLeave,
   isMobile = false,
@@ -21,6 +22,7 @@ export const getFullCalendarConfig = ({
   headerToolbar: false,
   height: 835,
   dayHeaderFormat: { weekday: "short" },
+  dayHeaderContent: (arg) => arg.text.toUpperCase(),
   dayCellClassNames: (arg) =>
     arg.date.getDay() === new Date().getDay() ? "fc-day-today" : "",
   slotMinTime: "08:00:00",
@@ -29,6 +31,15 @@ export const getFullCalendarConfig = ({
   allDaySlot: true,
   allDayText: "ONLINE",
   eventContent: (eventInfo) => renderEventContent(eventInfo, isMobile),
+  eventClassNames: (arg) =>
+    arg.event.extendedProps?.isPinned ? ["fc-event-pinned"] : [],
+  eventDidMount: (arg) => {
+    if (arg.event.extendedProps?.isPinned) {
+      arg.el.style.borderColor = "transparent";
+      arg.el.style.borderWidth = "1px";
+      arg.el.style.borderStyle = "solid";
+    }
+  },
   eventClick: handleEventClick,
   eventMouseEnter: handleEventMouseEnter,
   eventMouseLeave: handleEventMouseLeave,
@@ -37,6 +48,7 @@ export const getFullCalendarConfig = ({
   selectMinDistance: 25,
   select: handleSelect,
   selectAllow: handleSelectAllow,
+  unselect: handleUnselect,
   longPressDelay: 0,
   selectLongPressDelay: 500,
   firstDay: 1,

src/components/generator/Calendar/utils/calendarUtils.jsx

@@ -19,7 +19,12 @@ export const renderEventContent = (eventInfo, isMobile = false) => {
 
     return (
       <div
-        style={{ position: "relative", height: "100%", textAlign: "center" }}
+        style={{
+          position: "relative",
+          height: "100%",
+          textAlign: "center",
+          padding: "0.25rem 0.375rem",
+        }}
       >
         {eventDuration >= minDurationToShowTime && (
           <div
@@ -51,22 +56,20 @@ export const renderEventContent = (eventInfo, isMobile = false) => {
     );
   } else {
     const isPinned = isEventPinned(eventInfo.event);
+    const instructorText = eventInfo.event.extendedProps.description?.trim();
+    const shouldShowInstructor =
+      !!instructorText && instructorText.toLowerCase() !== "no instructor";
 
     return (
       <div
         style={{
           position: "relative",
           backgroundColor: isPinned ? "rgba(0, 0, 0, 0.5)" : "transparent",
           height: "100%",
-          padding: "2px",
-          borderRadius: "4px",
+          padding: "0.25rem 0.375rem",
+          borderRadius: "inherit",
         }}
       >
-        {eventDuration >= minDurationToShowTime && (
-          <div style={{ position: "absolute", top: "2px", left: "2px" }}>
-            <b>{eventInfo.timeText}</b>
-          </div>
-        )}
         {isPinned && (
           <div
             style={{
@@ -89,27 +92,25 @@ export const renderEventContent = (eventInfo, isMobile = false) => {
           <b>{eventInfo.timeText}</b>
           <br />
           <span>{eventInfo.event.title}</span>
-          {(isMobile || eventDuration >= minDurationToShowTime) && (
-            <>
-              <br />
-              <span
-                style={{
-                  display: "block",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  maxWidth: "100%",
-                  lineHeight: "1.2",
-                }}
-                title={
-                  eventInfo.event.extendedProps.description ||
-                  "Instructor information not available"
-                }
-              >
-                {eventInfo.event.extendedProps.description || "No instructor"}
-              </span>
-            </>
-          )}
+          {(isMobile || eventDuration >= minDurationToShowTime) &&
+            shouldShowInstructor && (
+              <>
+                <br />
+                <span
+                  style={{
+                    display: "block",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    maxWidth: "100%",
+                    lineHeight: "1.2",
+                  }}
+                  title={instructorText}
+                >
+                  {instructorText}
+                </span>
+              </>
+            )}
         </div>
       </div>
     );

src/components/generator/Calendar/utils/eventHandlerUtils.js

@@ -17,6 +17,11 @@ import {
   generateTimetables,
   getValidTimetables,
 } from "@/lib/generator/timetableGeneration/timetableGeneration";
+import {
+  getNormalizedSelectionWindow,
+  getSelectionDayCodes,
+  toSlotRange,
+} from "./selectionUtils.js";
 
 // Extract the complex logic for handling course component clicks
 export const handleCourseComponentClick = (
@@ -118,35 +123,19 @@ export const handleCalendarSelection = (
 ) => {
   const startDateTime = new Date(selectInfo.startStr);
   const endDateTime = new Date(selectInfo.endStr);
-  const startTime =
-    startDateTime.getHours() + ":" + (startDateTime.getMinutes() || "00");
-  const endTime =
-    endDateTime.getHours() + ":" + (endDateTime.getMinutes() || "00");
-  const slotStart =
-    (startDateTime.getHours() - 8) * 2 + startDateTime.getMinutes() / 30;
-  const slotEnd =
-    (endDateTime.getHours() - 8) * 2 + endDateTime.getMinutes() / 30;
-
-  const dayMapping = {
-    Mon: "M",
-    Tue: "T",
-    Wed: "W",
-    Thu: "R",
-    Fri: "F",
-    Sat: "S",
-    Sun: "U",
-  };
-
-  // Get all days between start and end date
-  const days = [];
-  let currentDate = new Date(startDateTime);
-  while (currentDate <= endDateTime) {
-    const dayName = currentDate.toLocaleString("en-US", { weekday: "short" });
-    if (dayMapping[dayName]) {
-      days.push(dayMapping[dayName]);
-    }
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
+  const normalizedWindow = getNormalizedSelectionWindow(
+    startDateTime,
+    endDateTime,
+  );
+  if (!normalizedWindow) return;
+
+  const { slotStart, slotEnd } = toSlotRange(
+    normalizedWindow.selectionStartMinutes,
+    normalizedWindow.selectionEndMinutes,
+  );
+  if (slotEnd <= slotStart) return;
+
+  const days = getSelectionDayCodes(startDateTime, endDateTime);
 
   if (days.length > 0) {
     const slotsToBlock = [];