Merge pull request #513 from cornell-dti/nd433/grayDatePicker

Changed the MiniCal component to gray out weekends and holidays

frontend/src/components/MiniCal/MiniCal.tsx

@@ -6,6 +6,35 @@ import './datepicker_override.css';
 import styles from './minical.module.css';
 import { useDate } from '../../context/date';
 
+/**startDate is inclusive, endDate is exclusive */
+type Holiday = {
+  startDate: Date;
+  endDate: Date;
+  holidayName: string;
+};
+
+const holidays: Holiday[] = [
+  {
+    startDate: new Date('2024-2-24'),
+    endDate: new Date('2024-2-28'),
+    holidayName: 'Febuaray Break',
+  },
+  {
+    startDate: new Date('2024-3-30'),
+    endDate: new Date('2024-4-8'),
+    holidayName: 'Spring Break',
+  },
+];
+
+const isHoliday = (date: Date) => {
+  for (const holiday of holidays) {
+    if (holiday.startDate <= date && date < holiday.endDate) {
+      return true;
+    }
+  }
+  return false;
+};
+
 const currentDate = new Date();
 const isToday = (date: Date) =>
   date.getDate() === currentDate.getDate() &&
@@ -88,11 +117,19 @@ const MiniCal = () => {
     window.scroll(x + 1, y);
     window.scroll(x, y);
   };
+  const isWeekday = (date: Date) => {
+    const day = date.getDay();
+    return day !== 0 && day !== 6;
+  };
+
+  const filterDate = (date: Date) => {
+    return isWeekday(date) && !isHoliday(date);
+  };
 
   return (
     <div className={styles.root}>
       <DatePicker
-        adjustDateOnChange
+        //adjustDateOnChange
         selected={curDate}
         onChange={updateDate}
         closeOnScroll={true}
@@ -101,6 +138,7 @@ const MiniCal = () => {
         onCalendarOpen={() => updateExpanded('Expanded')}
         onCalendarClose={() => updateExpanded('Collapsed')}
         customInput={<CustomInput />}
+        filterDate={filterDate}
         highlightDates={[{ 'custom--today': [new Date()] }]}
         renderCustomHeader={({
           date,

frontend/src/components/MiniCal/datepicker_override.css

@@ -69,7 +69,7 @@
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
   border-radius: 0.3rem;
-  background-color: #000000;
+  background-color: black;
   color: #fff;
 }
 
@@ -78,7 +78,7 @@
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #000000;
+  background-color: rgba(0, 0, 0, 0.25);
   color: #fff;
 }