diff --git a/src/assets/icons/cal.svg b/src/assets/icons/cal.svg
new file mode 100644
index 00000000..72bdf07f
--- /dev/null
+++ b/src/assets/icons/cal.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/icons/png.svg b/src/assets/icons/png.svg
new file mode 100644
index 00000000..40ba160b
--- /dev/null
+++ b/src/assets/icons/png.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index 7a6d8762..961b505e 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -22,9 +22,10 @@
}
.calendar {
- // display: grid;
- // grid-template-columns: auto repeat(5, 1fr);
+ display: flex;
+ flex-direction: column;
gap: 10px;
+ position: relative; // Ensuring that child elements can be positioned in relation to this.
}
.day {
@@ -89,3 +90,38 @@
line-height: normal;
}
}
+
+.buttonContainer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 10px;
+ margin-top: auto;
+}
+
+.calendarButton {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ padding: 6px 6px;
+ border: none;
+ background-color: transparent;
+ color: #333;
+ cursor: pointer;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+.buttonIcon {
+ height: 24px;
+ fill: currentColor;
+}
+
+.divider {
+ height: 30px;
+ width: 1px;
+ background-color: grey;
+}
\ 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 0e478921..cd0c0e8c 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -5,6 +5,8 @@ import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
import { Chip } from '../Chip/Chip';
import styles from './CalendarGrid.module.scss';
+import calIcon from 'src/assets/icons/cal.svg';
+import pngIcon from 'src/assets/icons/png.svg';
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -59,7 +61,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren row)}
- {courseCells.map((Block: typeof CalendarCourseCell) => (
+ {/* {courseCells.map((Block: typeof CalendarCourseCell) => (
- ))}
+ ))} */}
+
+
{/* First divider */}
+
+
{/* Second divider */}
+
+
);
}