Merge pull request #33 from hack4impact-calpoly/calendar

feat: calendar added

package.json

@@ -10,10 +10,19 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@fullcalendar/bootstrap5": "^6.1.10",
+    "@fullcalendar/core": "^6.1.10",
+    "@fullcalendar/daygrid": "^6.1.10",
+    "@fullcalendar/interaction": "^6.1.10",
+    "@fullcalendar/list": "^6.1.10",
+    "@fullcalendar/react": "^6.1.10",
+    "@fullcalendar/timegrid": "^6.1.10",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@heroicons/react": "^2.1.1",
+    "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.3",
     "eslint-plugin-prettier": "^5.1.3",
     "framer-motion": "^11.0.3",
     "mongoose": "^7.6.8",

src/app/calendar/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+import React from 'react'
+import Calendar from '@components/Calendar'
+import style from "@styles/calendar/eventpage.module.css"
+
+
+
+
+export default function Events() {
+    return (
+        <div className={style.page}>
+            <header className={style.header}>
+                <h1>Event Calendar</h1>
+            </header>
+            <main>
+                <div>
+                    <Calendar 
+                    />
+                </div>
+            </main>
+
+
+        </div>
+    )
+}

src/app/components/Calendar.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import FullCalendar from '@fullcalendar/react'
+import dayGridPlugin from '@fullcalendar/daygrid' 
+import ineractionPlugin, {Draggable, DropArg} from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from "@fullcalendar/list"
+import {IEvent} from '@database/eventSchema'
+import style from "@styles/calendar/calendar.module.css"
+import styled from 'styled-components'
+import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!
+
+
+export default function Calendar () {
+
+    return (
+        <div>
+            <div className={style.wrapper}>
+                <FullCalendar
+                    plugins={[ dayGridPlugin, ineractionPlugin, timeGridPlugin, bootstrap5Plugin ]}
+                    headerToolbar={{
+                        left: 'prev,next today',
+                        center: 'title',
+                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
+                    }}
+                    events={{}}
+                    nowIndicator={true}
+                    editable={true}
+                    droppable={true}
+                    selectable={true}
+                    selectMirror={true}
+                    // dateClick={{}}
+                    // drop={}
+                    // eventClick={}
+                    initialView="dayGridMonth"
+                    contentHeight = "600px"
+                    themeSystem='bootstrap5'
+
+                    />
+            </div>
+
+        </div>
+    )
+
+}

src/app/globals.css

@@ -1,3 +1,16 @@
 * {
     margin: 0px;
+}
+
+:root{
+    @media (max-width: 767.98px) {
+        .fc .fc-toolbar.fc-header-toolbar {
+            display: block;
+            text-align: center;
+        }
+
+        .fc-header-toolbar .fc-toolbar-chunk {
+            display: block;
+        }
+    }
 }

src/app/styles/calendar/calendar.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+   margin: 10px;
+  }

src/app/styles/calendar/eventpage.module.css

@@ -0,0 +1,5 @@
+
+.header {
+    font-size: larger;
+    text-align: center;
+}