Merge pull request #59 from MichiganDataScienceTeam/56-add-calendar-page

56 add calendar page
MichiganDataScienceTeam · Jan 24, 2024 · 97d8045 · 97d8045
2 parents 6fe57bf + 005e4d5
commit 97d8045
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 34 deletions.
diff --git a/components/button.jsx b/components/button.jsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function Button({ href, text }) {
   return (
     <Link
-      className="rounded-lg xl:p-4 p-3 lg:text-lg text-base hover:-translate-y-1 bg-translucent transition drop-shadow-md"
+      className="rounded-lg xl:p-4 p-3 lg:text-lg text-base hover:-translate-y-1 bg-translucent transition drop-shadow-md block w-fit"
       href={href}
     >
       {text}

diff --git a/components/icon.jsx b/components/icon.jsx
@@ -11,7 +11,8 @@ import {
   IoClipboardOutline,
   IoBrowsersOutline,
   IoLogoSlack,
-  IoCopyOutline
+  IoCopyOutline,
+  IoCalendarOutline
 } from "react-icons/io5";
 import { createElement } from "react";
 
@@ -28,7 +29,8 @@ const iconMap = {
   clipboard: IoClipboardOutline,
   website: IoBrowsersOutline,
   slack: IoLogoSlack,
-  copy: IoCopyOutline
+  copy: IoCopyOutline,
+  calendar: IoCalendarOutline,
 
 };
 

diff --git a/components/navBar.jsx b/components/navBar.jsx
@@ -13,9 +13,8 @@ function NavLink({ to, children }) {
 function MobileNav({ open, setOpen }) {
   return (
     <div
-      className={`absolute  top-0 left-0 h-screen w-screen transform ${
-        open ? "-translate-x-0" : "-translate-x-full"
-      } transition-transform duration-300 ease-in-out filter bg-grey`}
+      className={`absolute  top-0 left-0 h-screen w-screen transform ${open ? "-translate-x-0" : "-translate-x-full"
+        } transition-transform duration-300 ease-in-out filter bg-grey`}
     >
       <div className="flex items-center justify-center filter drop-shadow-md bg-grey-dark h-20">
         {" "}
@@ -67,7 +66,7 @@ function MobileNav({ open, setOpen }) {
         >
           Our Sponsors
         </Link>
-        {/* <Link
+        <Link
           className="text-xl font-normal my-4"
           href="/calendar"
           onClick={() =>
@@ -77,7 +76,7 @@ function MobileNav({ open, setOpen }) {
           }
         >
           Calendar
-        </Link> */}
+        </Link>
 
         <Link
           className="text-xl font-normal my-4"
@@ -123,19 +122,16 @@ export default function Navbar() {
         >
           {/* hamburger button */}
           <span
-            className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${
-              open ? "rotate-45 translate-y-3.5" : ""
-            }`}
+            className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3.5" : ""
+              }`}
           />
           <span
-            className={`h-1 bg-white rounded-lg transition-all duration-300 ease-in-out ${
-              open ? "w-0" : "w-full"
-            }`}
+            className={`h-1 bg-white rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"
+              }`}
           />
           <span
-            className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${
-              open ? "-rotate-45 -translate-y-3.5" : ""
-            }`}
+            className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3.5" : ""
+              }`}
           />
         </div>
 
@@ -144,7 +140,7 @@ export default function Navbar() {
           <NavLink to="/resources">Resources</NavLink>
           <NavLink to="/team">Our Team</NavLink>
           <NavLink to="/sponsors">Our Sponsors</NavLink>
-          {/* <NavLink to="/calendar">Calendar</NavLink> */}
+          <NavLink to="/calendar">Calendar</NavLink>
 
           <NavLink to="/contact">Contact</NavLink>
           <NavLink to="/join">Join</NavLink>

diff --git a/config/links.json b/config/links.json
@@ -29,5 +29,10 @@
     "name": "Email",
     "href": "mailto:[email protected]",
     "icon_name": "envelope"
+  },
+  {
+    "name": "Calendar",
+    "href": "https://calendar.google.com/calendar/u/0?cid=Y18yMmNhMGMxNTE1ODU3NjA0NDJjYWQ1Nzk2ZmI5MWJkMThiN2RiMTFkODEzZTkxNDNlMzg1NDlhYWRjZTY1YWZlQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20",
+    "icon_name": "calendar"
   }
-]
+]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,10 @@
     "export": "next export -o out"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.10",
+    "@fullcalendar/google-calendar": "^6.1.10",
+    "@fullcalendar/list": "^6.1.10",
+    "@fullcalendar/react": "^6.1.10",
     "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",

diff --git a/pages/calendar.jsx b/pages/calendar.jsx
@@ -1,9 +1,43 @@
 import Layout from "@/components/layout";
 import Hero from "@/components/hero";
-export default function calendar({ content }) {
+import FullCalendar from '@fullcalendar/react'
+import listPlugin from '@fullcalendar/list';
+import googleCalendarPlugin from '@fullcalendar/google-calendar';
+import Button from "@/components/button";
+import loadStaticData from "@/shared/static";
+import HeadContent from "@/components/headContent";
+export default function CalendarPage({ calendarLink }) {
+
   return (
     <Layout>
+      <HeadContent
+        title={"Michigan Data Science Team - Calendar"}
+        description={
+          "Here is a calendar of all of the Michigan Data Science Team events!"
+        }
+      />
       <Hero title="Calendar" />
+      <div className="mx-auto container p-2">
+
+        <div className="mb-4"><Button className='mb-4' href={calendarLink} text={"Add to Google Calendar"} /></div>
+        <FullCalendar
+          plugins={[listPlugin, googleCalendarPlugin]}
+          initialView="listMonth"
+          googleCalendarApiKey="AIzaSyDsoaZFzbHcCD7m6rhelWdsWS_AjLJQCko"
+          events={{
+            googleCalendarId: 'c_22ca0c151585760442cad5796fb91bd18b7db11d813e9143e38549aadce65afe@group.calendar.google.com',
+          }}
+        />
+      </div>
+
     </Layout>
   );
 }
+
+
+export async function getStaticProps() {
+  const data = loadStaticData("links.json");
+  let calendarLink = data.find(obj => obj.name === "Calendar")?.href || ""
+
+  return { props: { calendarLink } };
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -4,13 +4,13 @@
 
 
 
-.hero{
+.hero {
   @apply pt-24;
-background: radial-gradient(50% 50% at 50% 50%, #896AE4 0%, rgba(67, 151, 117, 0) 100%), conic-gradient(from 174.92deg at 50% 50%, #3E9644 -56.25deg, #896AE4 27.03deg, #34C5A2 169.15deg, #3E9644 303.75deg, #896AE4 387.03deg);
+  background: radial-gradient(50% 50% at 50% 50%, #896AE4 0%, rgba(67, 151, 117, 0) 100%), conic-gradient(from 174.92deg at 50% 50%, #3E9644 -56.25deg, #896AE4 27.03deg, #34C5A2 169.15deg, #3E9644 303.75deg, #896AE4 387.03deg);
 }
 
 .glow {
-    filter: drop-shadow(0 0 0.2rem #ffffff21);
+  filter: drop-shadow(0 0 0.2rem #ffffff21);
 }
 
 .link {
@@ -22,11 +22,13 @@ background: radial-gradient(50% 50% at 50% 50%, #896AE4 0%, rgba(67, 151, 117, 0
   grid-template-rows: 1fr auto 1fr;
 
 }
-@media (max-width: 640px) { 
+
+@media (max-width: 640px) {
   .bullets {
-  grid-template-rows: 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr;
-          grid-template-columns: 1fr;}
- }
+    grid-template-rows: 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr;
+    grid-template-columns: 1fr;
+  }
+}
 
 .markdown h1 {
   @apply text-4xl;
@@ -62,10 +64,12 @@ background: radial-gradient(50% 50% at 50% 50%, #896AE4 0%, rgba(67, 151, 117, 0
   @apply transition;
   @apply text-primary-light
 }
+
 .markdown ul {
   @apply relative;
   @apply my-4;
 }
+
 .markdown li {
   @apply before:content-['-'];
   @apply before:absolute;
@@ -77,42 +81,72 @@ background: radial-gradient(50% 50% at 50% 50%, #896AE4 0%, rgba(67, 151, 117, 0
   @apply my-5
 }
 
-.markdown strong{
+.markdown strong {
   @apply font-bold;
 }
 
-.markdown .callout{
+.markdown .callout {
   @apply m-4;
   @apply bg-grey;
   @apply rounded-lg;
   @apply p-5;
 }
 
-.markdown u{
+.markdown u {
   @apply font-normal
 }
 
-.markdown .md-button{
+.markdown .md-button {
   @apply rounded-lg;
   @apply p-5;
   @apply lg:text-lg;
   @apply text-base;
   @apply hover:-translate-y-1;
   @apply bg-translucent;
-  @apply transition; 
+  @apply transition;
   @apply drop-shadow-md;
   color: #edfffe;
   @apply no-underline;
 }
-.markdown .md-button-wrapper{
+
+.markdown .md-button-wrapper {
   @apply py-4;
   @apply mb-6;
   @apply hover:-translate-y-2;
   @apply transition;
   @apply w-fit;
 }
 
-.markdown .highlight{
+.markdown .highlight {
   @apply font-bold;
   @apply text-primary-light;
+}
+
+:root {
+  --fc-page-bg-color: #333333;
+  --fc-list-event-hover-bg-color: #333333;
+  --fc-border-color: none;
+  --fc-button-bg-color: #896AE4;
+  --fc-button-border-color: #896AE4;
+  --fc-button-hover-bg-color: #744ee3;
+  --fc-button-hover-border-color: #744ee3;
+  --fc-button-active-bg-color: #744ee3;
+  --fc-button-active-border-color: #744ee3;
+  --fc-page-bg-color: #333333;
+}
+
+.fc-cell-shaded {
+  border-radius: 0.5rem;
+}
+
+.fc .fc-list-sticky .fc-list-day>* {
+  border-radius: 0.5rem;
+}
+
+.fc .fc-list-event-title {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.fc .fc-list-event-time {
+  border-radius: 0.5rem 0 0 0.5rem;
 }