Merge components

calvintanwj · Jun 5, 2021 · c9df607 · c9df607 · vercel · Jun 5, 2021
2 parents 52bcb9b + b025593
commit c9df607
Show file tree

Hide file tree

Showing 15 changed files with 1,741 additions and 194 deletions.
diff --git a/moments/package.json b/moments/package.json
@@ -3,14 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fullcalendar/bootstrap": "^5.7.2",
+    "@fullcalendar/daygrid": "^5.7.2",
+    "@fullcalendar/interaction": "^5.7.2",
+    "@fullcalendar/list": "^5.7.2",
+    "@fullcalendar/moment": "^5.7.2",
+    "@fullcalendar/react": "^5.7.0",
+    "@fullcalendar/timegrid": "^5.7.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "date-fns": "^2.22.1",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-big-calendar": "^0.33.5",
+    "react-datepicker": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-markdown": "^6.0.2",
+    "react-modal": "^3.14.2",
     "react-scripts": "4.0.3",
+    "react-syntax-highlighter": "^15.4.3",
+    "remark-gfm": "^1.0.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/moments/public/index.html b/moments/public/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://kit.fontawesome.com/307a86098e.js" crossorigin="anonymous"></script>    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"

diff --git a/moments/src/App.js b/moments/src/App.js
@@ -1,11 +1,16 @@
 import Calendar from "./Calendar/Calendar.js"
 import Journal from "./Journal/Journal.js";
+import Scheduler from "./Scheduler/Scheduler.js";
 import "./index.css";
+import Modal from "react-modal";
+
+Modal.setAppElement('#root');
 
 function App() {
   return (
     <div id="App">
       <Calendar key="calendar"/>
+      <Scheduler />
       <Journal />
     </div>
   );

diff --git a/moments/src/Calendar/Calendar.css b/moments/src/Calendar/Calendar.css
@@ -8,6 +8,12 @@ Table styling
 /*
   Row in innertable containing date
 */
+
+#calendar-container {
+  height: 100%;
+  overflow: scroll;
+}
+
 .dateRow {
   text-align: left;
   vertical-align: top;
@@ -37,47 +43,56 @@ Table styling
   border-collapse: collapse;
 } */
 
-#calendar-interface{
+#calendar-interface {
   float: left;
+  border: 3px solid grey;
+  grid-column: 1;
+  grid-row: 1;
+  height: 43vh;
+  display: grid;
 }
 
 table {
   table-layout: fixed;
+  height: 100%;
   border-collapse: collapse;
   font-family: "Exo 2", sans-serif;
-  width: 50vw;
+  width: 100%;
   text-align: center;
 }
 
 #calendar-toolbar {
-  width: 45vw;
+  width: 100%;
+  display: flex;
 }
 
-#calendar-toolbar button, input {
+.calendar-toolbar-buttons {
   font-family: "Exo 2", sans-serif;
   font-weight: bold;
-  font-size: 15px;
-  padding: 5px;
-  margin: 2px;
-  border: 5px solid #cccccc;
+  font-size: 0.8em;
+  padding: 1%;
+  margin: 1%;
+  border: 3px solid #cccccc;
   border-radius: 20px;
+  width: 20%;
   outline: none;
 }
 
-#calendar-toolbar button:hover, input:hover {
+.calendar-toolbar-buttons:hover {
   background-color: lightgrey;
   cursor: pointer;
 }
 
 #date-header {
-  font-size: 25px;
+  font-size: 1em;
   font-weight: bold;
-  margin: 15px;
+  margin: 2%;
 }
 
 #day-header {
+  font-size: 1.3em;
+  margin-left: 3%;
   font-family: "Exo 2", sans-serif;
-  width: 45vw;
 }
 
 /*
@@ -92,6 +107,8 @@ table {
 */
 .innerTable {
   border: none;
+  table-layout: fixed;
+  height: 100%;
 }
 
 #Outer-Calendar > tbody > tr > td {

diff --git a/moments/src/Calendar/Calendar.js b/moments/src/Calendar/Calendar.js
@@ -125,45 +125,56 @@ function Calendar() {
 
       <div id="calendar-toolbar">
         <input
+          className="calendar-toolbar-buttons"
           type="text"
           value={formEventName}
           onChange={handleChangeFormEventName}
         ></input>
         {/* <input type="submit" value="Create Event" onClick={handleSubmitEvent}></input> */}
         <input
+          className="calendar-toolbar-buttons"
           type="submit"
           value="Create Event"
           onClick={handleSubmitEvent}
         ></input>
         <button
+          className="calendar-toolbar-buttons"
           onClick={() => {
             changeMonth(-1);
           }}
         >
           Previous Month
         </button>
         <button
+          className="calendar-toolbar-buttons"
           onClick={() => {
             changeMonth(1);
           }}
         >
           Next Month
         </button>
-        <button onClick={gotoToday}>Today</button>
+        <button className="calendar-toolbar-buttons" onClick={gotoToday}>
+          Today
+        </button>
+      </div>
+      <div id="calendar-container">
+        <table id="Outer-Calendar">
+          <caption id="date-header">{format(date, "MMM y")}</caption>
+          <thead>
+            <DayHeaderRow key="DayHeaderRow" />
+          </thead>
+          <tbody>
+            {/* <CalendarBody dayhandler={dayHandler} calendarDate={date} /> */}
+            {dayData.map((row, index) => (
+              <WeekRow
+                key={"row-" + index}
+                days={row}
+                dayHandler={dayHandler}
+              />
+            ))}
+          </tbody>
+        </table>
       </div>
-
-      <table id="Outer-Calendar">
-        <caption id="date-header">{format(date, "MMM y")}</caption>
-        <thead>
-          <DayHeaderRow key="DayHeaderRow" />
-        </thead>
-        <tbody>
-          {/* <CalendarBody dayhandler={dayHandler} calendarDate={date} /> */}
-          {dayData.map((row, index) => (
-            <WeekRow key={"row-" + index} days={row} dayHandler={dayHandler} />
-          ))}
-        </tbody>
-      </table>
     </div>
   );
 }