From f749dcd3a6f85a5e980938844f7916124e350c4c Mon Sep 17 00:00:00 2001 From: Damian <37555910+DCRepublic@users.noreply.github.com> Date: Sat, 2 Nov 2024 18:00:05 -0400 Subject: [PATCH] Calendar: fonts and css --- app/calendar/page.tsx | 146 ++++++++++++++-------------------------- components/Calendar.tsx | 22 ++++++ styles/globals.css | 52 ++++++++++++++ 3 files changed, 124 insertions(+), 96 deletions(-) diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx index 49e7fe5..e7c91c3 100644 --- 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 ( -
-
+
+
diff --git a/components/Calendar.tsx b/components/Calendar.tsx index 4cd9121..4111310 100644 --- 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 ( + + {eventInfo.timeText} +
{eventInfo.event.title}
+ + ); + } + return ( ); } diff --git a/styles/globals.css b/styles/globals.css index b5c61c9..395a507 100644 --- 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; +}