make calendar look better on mobile

stuysu · Nov 19, 2023 · 3673cb8 · 3673cb8
2 parents dfd13e9 + b8f5739
commit 3673cb8
Show file tree

Hide file tree

Showing 7 changed files with 425 additions and 24 deletions.
diff --git a/app/CalendarEmbed.js b/app/CalendarEmbed.js
@@ -1,13 +1,25 @@
+"use client";
+
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import events from "@/data/events.json";
+
 export default function CalendarEmbed() {
  return (
- <iframe
- src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FNew_York&showTitle=0&showNav=1&showPrint=0&showTabs=0&showCalendars=0&showTz=0&showDate=0&src=Y19oNGRyOGNndDFxMnQ0YXVlYms1NWEzYW02OEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23F09300"
- style={{ borderWidth: "0" }}
- className="rounded-lg"
- width="100%"
- height="100%"
- frameborder="0"
- scrolling="no"
+ <FullCalendar
+ plugins={[dayGridPlugin]}
+ initialView="dayGridMonth"
+ headerToolbar={{
+ start: "prev",
+ center: "title",
+ end: "next",
+ }}
+ weekends={true}
+ events={events}
+ eventColor="#e5d6ff"
+ eventTextColor="black"
+ height={600}
+ //eventClick={handleEventClick}
  />
  );
 }
diff --git a/app/globals.css b/app/globals.css
@@ -9,6 +9,7 @@
  --color-text: 69 55 157;
  --color-tertiary: 75 56 187;
  --color-quaternary: 229 214 255;
+ --fc-border-color: #a193f2;
  }
 
  :root[class~="dark"] {
@@ -61,3 +62,27 @@
  background: linear-gradient(47deg, #1a202c 55%, #4a5568 45%);
  }
 }
+
+.fc {
+ padding: 15px;
+ background-color: rgb(253 244 242);
+ border-color: black;
+ border-width: 1px;
+}
+
+.fc-event {
+ white-space: normal !important;
+ text-align: center;
+ font-weight: bold;
+ font-size: 0.5em;
+}
+
+.fc-day-today {
+ background: #ece2fe !important;
+}
+
+.fc-prev-button,
+.fc-next-button {
+ background-color: #3f3194 !important;
+ background-image: none;
+}
diff --git a/app/page.js b/app/page.js
@@ -38,26 +38,26 @@ export default function Home() {
  </HorizontalRuling>
 
  <div
- className={`flex lg:flex-row flex-col justify-center items-center pt-[20px] pb-[45px] striped_background`}
+ className={`flex lg:flex-row flex-col justify-center items-center pt-[20px] lg:pb-[0px] pb-[45px] striped_background`}
  >
- <div className="lg:relative lg:w-[50vw] w-[72.5vw] sm:mb-auto mb-[100px]">
- <p className="text-center text-secondary font-link text-[25px] underline mb-[15px]">
+ <div className="lg:relative lg:w-[50vw] w-[72.5vw] sm:mb-auto mb-[15px]">
+ <p className="text-center text-secondary font-link text-[25px] underline">
  Announcements
  </p>
  <div className="lg:ml-[2.5vw] lg:w-[45vw] lg:h-[45vw] w-[70vw] relative">
  <Announcements />
  </div>
  </div>
 
- <div className="lg:relative lg:w-[50vw] w-[72.5vw] lg:mt-0 mt-[20px]">
- <p className="text-center font-link text-[25px] lg:text-text text-primary underline mb-[15px]">
+ <div className="lg:relative lg:w-[50vw] w-[85vw] lg:mt-0">
+ <p className="text-center font-link text-[25px] lg:text-text text-secondary underline mb-[15px]">
  Calendar
  </p>
- <div className="bg-primary relative lg:ml-[2.5vw] border-black border-[1px] rounded-lg drop-shadow-2xl lg:w-[45vw] lg:h-[45vw] w-[70vw] h-[70vw]">
-  {/*<CalendarEmbed />*/}
-
- <p className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-text">
- Stay tuned :)
+ {/* border-black rounded-lg drop-shadow-2xl   w-[70vw] h-[70vw] */}
+ <div className="relative lg:ml-[2.5vw] lg:w-[45vw] w-[85vw] lg:h-[45vw]">
+ <CalendarEmbed />
+ <p style={{ fontSize: "10px", textAlign: "right" }}>
+ Updated: November 15, 2023
  </p>
  </div>
  </div>