qhgill/gcalintegration

src/app/events/page.js

@@ -1,7 +1,11 @@
 import CalendarEvents from "@/components/events/CalendarEvents";
 
 const Page = () => {
-  return <CalendarEvents />;
+  return (
+    <div className="bg-blobs1 bg-cover bg-biscuits-peach">
+      <CalendarEvents />
+    </div>
+  );
 };
 
 export default Page;

src/components/events/CalendarEvents.jsx

@@ -1,35 +1,57 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import moment from "moment";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import { Calendar, momentLocalizer } from "react-big-calendar";
 import CustomEvent from "./CustomEvents";
 import CustomHeader from "./CustomHeader";
 import CustomToolbar from "./CustomToolbar";
+import Modal from "./Modal";
 
 const mLocalizer = momentLocalizer(moment);
 
 const CalendarEvents = () => {
+  const [events, setEvents] = useState([]);
   const [date, setDate] = useState(new Date());
-  const dummyEvents = [
-    {
-      title: "Tabling event 1",
-      start: new Date(2024, 7, 5, 10, 0),
-      end: new Date(2024, 7, 5, 11, 0),
-      location: "WCH",
-      summary: "the best event",
-    },
-    {
-      title: "Tabling event 2",
-      start: new Date(2024, 6, 5, 10, 0),
-      end: new Date(2024, 6, 5, 11, 0),
-      location: "WCH",
-      summary: "even better event",
-    },
-  ];
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  useEffect(() => {
+    const startDate = new Date(
+      new Date().getTime() - 60 * 60 * 24 * 7 * 10 * 1000
+    ).toISOString();
+    const endDate = new Date(
+      new Date().getTime() + 60 * 60 * 24 * 7 * 10 * 1000
+    ).toISOString();
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `https://www.googleapis.com/calendar/v3/calendars/${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_EMAIL}/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}
+          &singleEvents=true&orderBy=startTime&timeMin=${startDate}&timeMax=${endDate}`
+        );
+
+        const offset = new Date().getTimezoneOffset() * 60000;
+        const data = await response.json();
+        const items = data.items.map((item) => {
+          item.allDay = !item.start.dateTime;
+          (item.start = item.start.dateTime
+            ? new Date(item.start.dateTime)
+            : new Date(new Date(item.start.date).getTime() + offset)),
+            (item.end = new Date(
+              item.end.dateTime || new Date(item.end.date).getTime() + offset
+            )),
+            (item.hidden = false);
+          return item;
+        });
+        setEvents(items);
+      } catch (error) {
+        console.error("Error fetching data: ", error);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
-    <div className="relative flex flex-col">
+    <div className="flex flex-col py-[2%]">
       {/* Calendar Section */}
       <span className="-rotate-90 text-biscuits-purple-200 font-shrikhand text-6xl  items-center w-[120px] absolute lg:bottom-1/4 lg:block hidden">
         {date.toLocaleString("default", { month: "long" })}
@@ -42,7 +64,7 @@ const CalendarEvents = () => {
             onNavigate={(newDate) => {
               setDate(newDate);
             }}
-            events={dummyEvents}
+            events={events}
             localizer={mLocalizer}
             defaultView="month"
             views={["month"]}
@@ -63,8 +85,8 @@ const CalendarEvents = () => {
                 className: `${
                   new Date(event).toLocaleDateString() ==
                   new Date().toLocaleDateString()
-                    ? "!bg-biscuits-orange"
-                    : "!bg-white"
+                    ? "!bg-biscuits-purple-100"
+                    : "!bg-biscuits-peach"
                 }`,
                 style: {
                   margin: 0,
@@ -73,6 +95,17 @@ const CalendarEvents = () => {
               };
             }}
           />
+          {selectedEvent && (
+            <Modal
+              setEvents={setSelectedEvent}
+              title={selectedEvent.summary}
+              description={selectedEvent.description}
+              location={selectedEvent.location}
+              startTime={selectedEvent.start}
+              endTime={selectedEvent.end}
+            />
+          )}
+          {console.log(selectedEvent)}
         </div>
       </section>
     </div>

src/components/events/CustomEvents.jsx

@@ -1,22 +1,20 @@
 import React from "react";
+import { COLORS } from "@/data/events/Color";
 
 const CustomEvent = ({ event }) => {
-  const getColorClass = () => {
-    if (event.title.includes("Tabling")) {
-      return "bg-biscuits-pinkTabling";
+  const getStyle = () => {
+    if (event.summary.toLowerCase().includes("tabling")) {
+      return COLORS["tabling"].event;
+    } else if (event.summary.toLowerCase().includes("resources")) {
+      return COLORS["resources"].event;
     }
-    if (event.title.includes("Event")) {
-      return "bg-biscuits-orangeEvent";
-    }
-    return "bg-biscuits-blueResources";
+    return "bg-biscuits-orangeEvent";
   };
 
-  const colorClass = getColorClass();
-
   return (
-    <div className={`rounded-lg p-2 mb-2 ${colorClass}`}>
-      <p className="text-black truncate text-center text-sm font-shrikhand">
-        {event.title}
+    <div className={`rounded-lg p-2 mb-2  ${getStyle()}`}>
+      <p className="truncate text-center text-sm font-shrikhand">
+        {event.summary}
       </p>
     </div>
   );

src/components/events/CustomHeader.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const CustomHeader = ({ label }) => {
   return (
-    <div className="font-bold font-shrikhand text-2xl 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-100 text-shadow-biscuits-purple-200">
+    <div className="font-bold font-shrikhand text-2xl 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-200 bg-biscuits-peach text-shadow-biscuits-purple-200">
       {label}
     </div>
   );

src/components/events/CustomToolbar.jsx

@@ -31,6 +31,21 @@ const mapToNum = {
   Dec: "12",
 };
 
+const filters = [
+  {
+    topic: "H4B Food Tabling",
+    color: "bg-biscuits-pinkTabling",
+  },
+  {
+    topic: "H4B Events",
+    color: "bg-biscuits-orangeEvent",
+  },
+  {
+    topic: "Food Resources",
+    color: "bg-biscuits-blueResources",
+  },
+];
+
 const CustomToolbar = (event) => {
   return (
     <div className="flex items-center justify-center w-full text-5xl xl:text-6xl text-center relative h-60 md:h-80 xl:h-52">
@@ -59,6 +74,17 @@ const CustomToolbar = (event) => {
       <div className="absolute top-28 xl:top-[50%] xl:left-[50%] xl:translate-x-[-50%] xl:translate-y-[-50%]">
         <Title text="Calendar of Events" color="purple" />
       </div>
+      <div className="font-inika font-bold absolute right-[5%] m-0 p-0 flex flex-col">
+        {filters.map((filter, index) => (
+          <div key={index} xs={9} sm={3} className="p-1">
+            <p
+              className={`${filter.color} rounded-xl p-1 mb-1 px-12 text-center text-sm`}
+            >
+              {filter.topic}
+            </p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

src/components/events/Modal.jsx

@@ -1,35 +1,44 @@
 import { IoMdClose } from "react-icons/io";
+import { COLORS } from "@/data/events/Color";
 
 const Modal = ({
   title = "Event Title",
-  date = "Date",
-  time = "Time",
-  place = "Place",
-  description = "No description provided.",
+  startTime,
+  endTime,
+  location = "No Location Specified",
+  description = "No Description Specified",
+  setEvents,
 }) => {
+  const getStyle = () => {
+    if (title.toLowerCase().includes("tabling")) {
+      return COLORS["tabling"].modal;
+    } else if (title.toLowerCase().includes("resources")) {
+      return COLORS["resources"].modal;
+    }
+    return "border-biscuits-orangeEvent";
+  };
   return (
-    <div className="relative flex-col bg-opacity-55 p-6 rounded-3xl border-8 w-1/3 bg-white border-biscuits-blue-100">
-      <button className="absolute top-6 right-6 hover:text-biscuits-blue-100 text-2xl">
+    <div
+      className={`flex-col p-6 fixed rounded-3xl border-8 w-1/3 bg-white ${getStyle()} z-50 top-[45%] translate-x-2/3`}
+    >
+      <button
+        onClick={() => setEvents(null)}
+        className="absolute top-6 right-6 hover:scale-110 duration-150 text-2xl"
+      >
         <IoMdClose />
       </button>
-      <div className="text-2xl mb-2 font-bold">{title}</div>
-      <ul className="list-none">
-        <li className="flex items-center mb-1">
-          <span className="w-3 h-3 bg-biscuits-blue-100 inline-block rounded-full mr-2"></span>
-          {date}
+      <div className="text-4xl mb-2 font-bold">{title}</div>
+      <ul className="list-disc marker:text-2xl list-inside">
+        <li>
+          Start: {startTime.toLocaleTimeString().split(":")[0]}{" "}
+          {startTime.toLocaleTimeString().split(":")[2].split(" ")[1]}
         </li>
-        <li className="flex items-center mb-1">
-          <span className="w-3 h-3 bg-biscuits-blue-100 inline-block rounded-full mr-2"></span>
-          {time}
-        </li>
-        <li className="flex items-center mb-1">
-          <span className="w-3 h-3 bg-biscuits-blue-100 inline-block rounded-full mr-2"></span>
-          {place}
-        </li>
-        <li className="flex items-center mb-1">
-          <span className="w-3 h-3 bg-biscuits-blue-100 inline-block rounded-full mr-2"></span>
-          {description}
+        <li>
+          End: {endTime.toLocaleTimeString().split(":")[0]}{" "}
+          {endTime.toLocaleTimeString().split(":")[2].split(" ")[1]}
         </li>
+        <li>{location}</li>
+        <li>{description}</li>
       </ul>
     </div>
   );

src/data/events/Color.js

@@ -0,0 +1,10 @@
+export const COLORS = {
+  tabling: {
+    event: "bg-biscuits-pinkTabling text-biscuits-purple-200",
+    modal: "border-biscuits-pinkTabling",
+  },
+  resources: {
+    event: "bg-biscuits-blueResources",
+    modal: "border-biscuits-blueResources",
+  },
+};