diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss index dd5e0a6d..675fd198 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss +++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss @@ -13,6 +13,15 @@ flex: 1 0 0; } +.calendarGrid { + display: flex; + flex-direction: column; +} + +.calendarRow { + display: flex; +} + .calendar { display: grid; grid-template-columns: auto repeat(5, 1fr); diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 95ff558f..9682521b 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -30,22 +30,17 @@ const Calendar: React.FC = (props) => { {/* Displaying the rest of the calendar */} - {hoursOfDay.map((hour) => ( -
- {/* Hour column */} -
- {hour}:00 +
+ {hoursOfDay.map(hour => ( +
+ {daysOfWeek.map(day => ( + + ))}
- {/* Calendar cells for each day */} - {daysOfWeek.map((day, dayIndex) => ( -
- -
- ))} -
- ))} + ))} +
- ); + ) }; export default Calendar;