Calendar: fonts and css

swat-sccs · Nov 2, 2024 · f749dcd · f749dcd
1 parent 692ebf0
commit f749dcd
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 96 deletions.
diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
@@ -7,6 +7,7 @@ import Calendar from "@/components/Calendar";
 import prisma from "@/lib/prisma";
 import { auth } from "@/lib/auth";
 import { getPlanCookie } from "@/app/actions";
+import { BorderColor } from "@mui/icons-material";
 
 export default async function DocsPage() {
   async function getEvents() {
@@ -24,7 +25,6 @@ export default async function DocsPage() {
       return courseColors[hash % courseColors.length];
     }
     const courseColors = [
-      "#FF8360",
       "#E8E288",
       "#7DCE82",
       "#3CDBD3",
@@ -33,116 +33,70 @@ export default async function DocsPage() {
       "#7CC6FE",
       "#5DFDCB",
       "#C3423F",
-      "#05668D",
-      "#037171",
+
       "#9067C6",
       "#E6AF2E",
     ];
-
-    let plans = await prisma.coursePlan.findMany({
-      where: {
-        AND: {
-          User: {
-            //@ts-ignore
-            uuid: session?.user.id,
-          },
-          //id: parseInt(planCookie),
-        },
-      },
-
-      include: {
-        courses: true,
-      },
-    });
-    /*FIX ME
-    let courses1 = await prisma.course.findMany({
-      where: {
-        CoursePlan: {
+    let courses;
+    if (planCookie) {
+      let plan = await prisma.coursePlan.findUnique({
+        where: {
           id: parseInt(planCookie),
         },
-      },
-
-      include: {
-        CoursePlan: true,
-      },
-    });
-*/
-    let filtered_data = plans.filter(
-      (plan: any) => plan.id == parseInt(planCookie)
-    );
-
-    let courses = filtered_data[0].courses;
-
-    for (let i = 0; i < courses.length; i++) {
-      let color = generateColorFromName(courses[i].subject);
-
-      let num: string = courses[i].courseReferenceNumber;
-      let meetingTimes = await prisma.meetingTime.findFirst({
-        where: {
-          courseReferenceNumber: num,
+        include: {
+          courses: true,
         },
       });
-      output.push({
-        title: courses[i]?.courseTitle,
-        color: color,
-        daysOfWeek: [
-          meetingTimes?.sunday && "0",
-          meetingTimes?.monday && "1",
-          meetingTimes?.tuesday && "2",
-          meetingTimes?.wednesday && "3",
-          meetingTimes?.thursday && "4",
-          meetingTimes?.friday && "5",
-          meetingTimes?.saturday && "6",
-        ],
-        startTime:
-          meetingTimes?.beginTime.slice(0, 2) +
-          ":" +
-          meetingTimes?.beginTime.slice(2),
-        endTime:
-          meetingTimes?.endTime.slice(0, 2) +
-          ":" +
-          meetingTimes?.endTime.slice(2),
-      });
-    }
-
-    /*
-    {
-      groupId: 'blueEvents', // recurrent events in this group move together
-      daysOfWeek: [ '4' ],
-      startTime: '10:45:00',
-      endTime: '12:45:00'
-    },
-
 
+      courses = plan?.courses;
+    }
 
-      let num: string = filtered_data[i].courseReferenceNumber;
-      let meetingTimes = await prisma.meetingTime.findFirst({
-        where: {
-          courseReferenceNumber: num,
-        },
-      });
-      output.push({
-        title: filtered_data[i]?.courseTitle,
-        daysOfWeek: [meetingTimes?.monday && "1", meetingTimes?.tuesday && "2"],
-        startTime:
-          meetingTimes?.beginTime.slice(0, 2) +
-          ":" +
-          meetingTimes?.beginTime.slice(2),
-        endTime:
-          meetingTimes?.endTime.slice(0, 2) +
-          ":" +
-          meetingTimes?.endTime.slice(2),
-      });
-
-    */
+    if (courses) {
+      for (let i = 0; i < courses.length; i++) {
+        let color = generateColorFromName(courses[i].subject);
 
+        let num: string = courses[i].courseReferenceNumber;
+        let meetingTimes = await prisma.meetingTime.findFirst({
+          where: {
+            courseReferenceNumber: num,
+          },
+        });
+        output.push({
+          classNames: "font-sans ",
+          textColor: "white",
+          title: courses[i]?.courseTitle,
+          daColor: color,
+          color: "rgba(0,0,0,0)",
+          borderColor: "rgba(0,0,0,0)",
+          borderWidth: "0px",
+          daysOfWeek: [
+            meetingTimes?.sunday && "0",
+            meetingTimes?.monday && "1",
+            meetingTimes?.tuesday && "2",
+            meetingTimes?.wednesday && "3",
+            meetingTimes?.thursday && "4",
+            meetingTimes?.friday && "5",
+            meetingTimes?.saturday && "6",
+          ],
+          startTime:
+            meetingTimes?.beginTime.slice(0, 2) +
+            ":" +
+            meetingTimes?.beginTime.slice(2),
+          endTime:
+            meetingTimes?.endTime.slice(0, 2) +
+            ":" +
+            meetingTimes?.endTime.slice(2),
+        });
+      }
+    }
+    console.log(output);
     return output;
   }
 
   let events = await getEvents();
   return (
-    <div className="grid grid-cols-3 p-4 -mt-20 w-screen absolute start-0 px-32 gap-0">
-      <div className=" col-start-1 h-[70vh] w-[50vw] col-span-2 ">
+    <div className="grid grid-cols-3 p-4 -mt-20 w-screen absolute start-0 px-32 gap-20">
+      <div className=" col-start-1 h-[70vh] w-[57vw] col-span-2 font-sans font-normal">
         <Calendar events={events} />
       </div>
       <div className="">

diff --git a/components/Calendar.tsx b/components/Calendar.tsx
@@ -2,20 +2,42 @@
 
 import FullCalendar from "@fullcalendar/react";
 import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
+import { Card } from "@nextui-org/react";
 import moment from "moment";
 
 export default function Calendar(props: any) {
   function dayHeaderContent(args: any) {
     return moment(args.date).format("ddd");
   }
+
+  function renderEventContent(eventInfo: any) {
+    console.log(eventInfo);
+    return (
+      <Card
+        className="absolute top-0 left-0 h-full w-[100%] rounded-none "
+        style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
+      >
+        <b className="font-sans"> {eventInfo.timeText}</b>
+        <div className="font-sans">{eventInfo.event.title}</div>
+      </Card>
+    );
+  }
+
   return (
     <FullCalendar
       height="100%"
       plugins={[timeGridPlugin]}
       initialView="timeGridWeek"
+      eventMinHeight={70}
+      allDaySlot={false}
+      expandRows
       slotDuration="01:00:00"
+      slotMinTime="08:30:00"
+      slotMaxTime="22:00:00"
       dayHeaderFormat={dayHeaderContent}
       events={props.events}
+      headerToolbar={false}
+      eventContent={renderEventContent}
     />
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,55 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* override fullcalendar white shadow and border; add filters */
+.fc-timegrid-event-harness-inset .fc-timegrid-event {
+  border: none !important;
+  box-shadow: none !important;
+  filter: drop-shadow(4px 6px 10px #00000044) brightness(100%) !important;
+  -webkit-filter: drop-shadow(4px 6px 10px #00000044) brightness(100%);
+  font-family: var(--font-sans);
+}
+
+.fc-timegrid-event-harness-inset .fc-timegrid-event:hover {
+  box-shadow: none !important;
+  filter: drop-shadow(4px 6px 10px #00000044) brightness(80%) !important;
+  -webkit-filter: drop-shadow(4px 6px 10px #00000044) brightness(80%);
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  -ms-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+  font-family: var(--font-sans);
+}
+
+.fc-col-header-cell-cushion {
+  color: white;
+}
+
+.fc-col-header-cell-cushion:hover {
+  color: white;
+  font-family: var(--font-sans);
+}
+
+.fc-col-header {
+  background-color: #151d2b;
+  font-family: var(--font-sans);
+}
+
+.fc-event-main-frame {
+  cursor: pointer;
+}
+
+.fc-event-title {
+  text-overflow: ellipsis;
+}
+
+h2 {
+  font-size: 1.1em;
+}
+
+.smallFont {
+  font-size: small;
+  margin: 0;
+}