Added calendar page

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>

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",

pages/calendar.jsx

@@ -1,9 +1,25 @@
 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';
+
+export default function CalendarPage({ content }) {
+
   return (
     <Layout>
       <Hero title="Calendar" />
+      <div className="mx-auto container p-2">
+        <FullCalendar
+          plugins={[listPlugin, googleCalendarPlugin]}
+          initialView="listMonth"
+          googleCalendarApiKey="AIzaSyDsoaZFzbHcCD7m6rhelWdsWS_AjLJQCko"
+          events={{
+            googleCalendarId: 'c_22ca0c151585760442cad5796fb91bd18b7db11d813e9143e38549aadce65afe@group.calendar.google.com',
+          }}
+        />
+      </div>
+
     </Layout>
   );
 }

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;
 }