From dd2f696f8de2c0b291e917ef4d4cb2171b76712c Mon Sep 17 00:00:00 2001 From: Derek Chen Date: Mon, 5 Feb 2024 23:04:24 -0600 Subject: [PATCH] feat: Calendar Grid and Grid Cells (#81) --- .../CalendarGrid/CalendarGrid.module.scss | 76 ++++++++++++++----- .../common/CalendarGrid/CalendarGrid.tsx | 59 ++++++++------ .../CalendarGridCell.module.scss | 34 ++++----- .../CalendarGridCell/CalendarGridCell.tsx | 4 +- 4 files changed, 112 insertions(+), 61 deletions(-) diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss index 6f1cf6c8..a2e208a4 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss +++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss @@ -3,6 +3,7 @@ .dayLabelContainer { display: flex; + flex-direction: row; height: 13px; min-width: 40px; min-height: 13px; @@ -13,24 +14,44 @@ flex: 1 0 0; } -.dayLabel { +.calendarGrid { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(13, 1fr); +} + +.calendarRow { + display: flex; +} + +.calendar { + // display: grid; + // grid-template-columns: auto repeat(5, 1fr); + gap: 10px; +} + +.day { + gap: 5px; color: colors.$burnt_orange; text-align: center; - font-family: Roboto; font-size: 14.22px; font-style: normal; font-weight: 500; line-height: normal; } -.calendar { - display: grid; - grid-template-columns: auto repeat(5, 1fr); - gap: 10px; +.timeAndGrid { + display: flex; } -.day { - gap: 5px; +.timeColumn { + display: flex; + min-height: 573px; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + flex: 1 0 0; + border-radius: var(--border-radius-none, 0px); } .timeBlock { @@ -41,18 +62,33 @@ max-width: 50px; min-height: 40px; flex-direction: column; - justify-content: flex-end; align-items: flex-end; + + .timeLabelContainer { + display: flex; + max-height: 20px; + flex-direction: column; + align-items: flex-end; + gap: 17px; + flex: 1 0 0; + align-self: stretch; + border-radius: var(--border-radius-none, 0px); + } + + p { + color: #1A2024; + text-align: left; + height: 6.6px; + align-self: stretch; + margin-top: 0; + margin-bottom: 0; + + /* Type scale/small */ + font-family: "Roboto Flex"; + font-size: 14.22px; + font-style: normal; + font-weight: 500; + line-height: normal; + } } -.timeLabelContainer { - display: flex; - max-height: 20px; - flex-direction: column; - justify-content: flex-end; - align-items: flex-end; - gap: 17px; - flex: 1 0 0; - align-self: stretch; - border-radius: var(--border-radius-none, 0px); -} \ No newline at end of file diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index f653b5bd..4b90edf1 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -3,35 +3,50 @@ import styles from './CalendarGrid.module.scss'; import CalendarCell from '../CalendarGridCell/CalendarGridCell'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; -const daysOfWeek = Object.values(DAY_MAP); +const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday") const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8); +const grid = Array.from({ length: 5 }, () => + Array.from({ length: 13 }, (_, columnIndex) => ( + + )) +); /** * Grid of CalendarGridCell components forming the user's course schedule calendar view * @param props */ const Calendar: React.FC = (props) => { - - return ( -
-
- {daysOfWeek.map((day, dayIndex) => ( -
-
-
{day}
-
- {hoursOfDay.map((hour) => ( -
-
- {hour}:00 -
- -
- ))} + return ( +
+
+ {/* Empty cell in the top-left corner */} +
+ {/* Displaying day labels */} + {daysOfWeek.map(day => ( +
+ {day}
))}
- ); - }; - - export default Calendar; \ No newline at end of file + {/* Displaying the rest of the calendar */} +
+
+ {hoursOfDay.map((hour) => ( +
+
+

{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}

+
+
+ ))} +
+
+ {grid.map((row, rowIndex) => ( + row + ))} +
+
+
+ ) +}; + +export default Calendar; \ No newline at end of file diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss index 52db015a..2199d866 100644 --- a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss +++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss @@ -1,20 +1,18 @@ .calendarCell { - display: flex; - width: 165px; - height: 52.231px; - min-width: 45px; - min-height: 40px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - position: relative; - } + display: flex; + width: 165px; + height: 52.231px; + min-width: 45px; + min-height: 40px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + border: 1px solid #DADCE0; +} - .hourLine { - position: absolute; - left: 0; - right: 0; - top: 50%; - border-top: 1px solid black; /* Adjust line styles as needed */ - } - \ No newline at end of file +.hourLine { + width: 165px; + height: 1px; + border-radius: var(--border-radius-none, 0px); + background: rgba(218, 220, 224, 0.25); +} \ No newline at end of file diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx index 03bbfdf0..cdc2c1b1 100644 --- a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx +++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx @@ -8,7 +8,9 @@ import styles from './CalendarGridCell.module.scss'; const CalendarCell: React.FC = (props) => { return (
-
+
+ +
); };