52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
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);
|
|
daysOfWeek.pop();
|
|
daysOfWeek.pop();
|
|
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
|
const grid = Array.from({ length: 5 }, () =>
|
|
Array.from({ length: 13 }, (_, columnIndex) => (
|
|
<CalendarCell key={columnIndex} />
|
|
))
|
|
);
|
|
|
|
/**
|
|
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
|
* @param props
|
|
*/
|
|
const Calendar: React.FC = (props) => {
|
|
return (
|
|
<div className={styles.calendar}>
|
|
<div className={styles.dayLabelContainer}>
|
|
{/* Empty cell in the top-left corner */}
|
|
<div className={styles.day} />
|
|
{/* Displaying day labels */}
|
|
{daysOfWeek.map(day => (
|
|
<div key={day} className={styles.day}>
|
|
{day}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* Displaying the rest of the calendar */}
|
|
<div className={styles.timeAndGrid}>
|
|
<div className={styles.timeColumn}>
|
|
{hoursOfDay.map((hour) => (
|
|
<div key={hour} className={styles.timeLabelContainer}>
|
|
<span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className={styles.calendarGrid}>
|
|
{grid.map((row, rowIndex) => (
|
|
row
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default Calendar; |