Add a basic FullCalendar to Schedule screen

package-lock.json

@@ -1274,6 +1274,42 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fullcalendar/common": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.0.0-beta.4.tgz",
+      "integrity": "sha512-2kvOx3Qfrt94MoXT5bWQ0ry4G8YhMQ4Qrtz/fgfQO+5ZBIqTgfSGpwcciyeHcvxr1DmTf8s7flB71TbC++tQ2Q==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "@fullcalendar/core": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.0.0-beta.4.tgz",
+      "integrity": "sha512-5VxTdyZkUMmWJoi2/UtEK6JPCgsIXSfD4TXMmQCpvJt6MnkAfzHjr262ryvV4F0/MfK2YGhDbypJN1E8BPdarw==",
+      "requires": {
+        "@fullcalendar/common": "5.0.0-beta.4",
+        "preact": "^10.0.5",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.0.0-beta.4.tgz",
+      "integrity": "sha512-ZWCF4dUCDngPqOJ3iUGl/ZiSOah8mgo9fayPR3WLazGMoQTsSAqMBGSuhFaNNdMDWQ+dhcT2JBa8e9DNoe2S+g==",
+      "requires": {
+        "@fullcalendar/common": "5.0.0-beta.4",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@fullcalendar/react": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.0.0-beta.4.tgz",
+      "integrity": "sha512-gY8+GaUe43olA1rjXD/wCsOBTx4VmRquTK4iHS/ib5x1N1J8YZqTDygx4hGbJ8Aflj6RuVpU5wL7NHydYamohg==",
+      "requires": {
+        "@fullcalendar/common": "5.0.0-beta.4",
+        "tslib": "^1.9.3"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -5294,9 +5330,9 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
     "eventemitter3": {
-      "version": "4.0.1",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
-      "integrity": "sha512-MnI0l35oYL2C/c80rjJN7qu50MDx39yYE7y7oYck2YA3v+y7EaAenY8IU8AP4d1RWqE8VAKWFGSh3rfP87ll3g=="
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ=="
     },
     "events": {
       "version": "3.1.0",
@@ -5997,6 +6033,11 @@
         "nan": "^2.12.1"
       }
     },
+    "fullcalendar-scheduler": {
+      "version": "5.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/fullcalendar-scheduler/-/fullcalendar-scheduler-5.0.0-beta.4.tgz",
+      "integrity": "sha512-pOx2k2mLPYyfqXJMpUw2ps7mzzIr6eGNwg1Q4SnTP9NuZN0Jyqm7wAU6XI/+bmf2CgO3KE0AdFd4XFkhC6TljQ=="
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -6465,9 +6506,9 @@
       "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
     },
     "http-proxy": {
-      "version": "1.18.0",
+      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -10227,6 +10268,11 @@
         "uniq": "^1.0.1"
       }
     },
+    "preact": {
+      "version": "10.4.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.4.tgz",
+      "integrity": "sha512-EaTJrerceyAPatQ+vfnadoopsMBZAOY7ak9ogVdUi5xbpR8SoHgtLryXnW+4mQOwt21icqoVR1brkU2dq7pEBA=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

package.json

@@ -3,10 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fullcalendar/core": "^5.0.0-beta.4",
+    "@fullcalendar/daygrid": "^5.0.0-beta.4",
+    "@fullcalendar/react": "^5.0.0-beta.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "customize-cra": "^1.0.0-alpha.0",
+    "fullcalendar-scheduler": "^5.0.0-beta.4",
     "less": "^3.11.1",
     "less-loader": "^6.1.0",
     "luxon": "^1.24.1",

src/components/Schedule/DaySelector.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+
+export default function DaySelector() {
+
+		return (
+			<FullCalendar
+				initialView='dayGridMonth'
+				plugins={[dayGridPlugin]}
+			/>
+		);
+}

src/screens/Schedule.js

@@ -10,17 +10,17 @@ import {
 } from 'rsuite';
 
 import TimezonePicker from '../components/General/TimezonePicker';
+import DaySelector from '../components/Schedule/DaySelector';
 import { durations } from '../assets/data/durations';
 
 export default function Schedule() {
 	const [durationIdx, setDurationIdx] = useState(0);
 
 	const handleIncrement = () => {
-		if (durationIdx <= durations.length-2) {
+		if (durationIdx <= durations.length - 2) {
 			setDurationIdx(durationIdx + 1);
 		}
 	};
-
 	const handleDecrement = () => {
 		if (durationIdx > 0) {
 			setDurationIdx(durationIdx - 1);
@@ -47,11 +47,11 @@ export default function Schedule() {
 					<TimezonePicker />
 				</FormGroup>
 				<FormGroup style={{ width: 200 }}>
-					<InputGroup style={{background: 'white'}}>
+					<InputGroup style={{ background: 'white' }}>
 						<InputGroup.Button onClick={handleDecrement}>
 							<Icon icon='minus' />
 						</InputGroup.Button>
-						<div style={{ textAlign: 'center', paddingTop:5 }}>
+						<div style={{ textAlign: 'center', paddingTop: 5 }}>
 							{durations[durationIdx].label}
 						</div>
 						<InputGroup.Button onClick={handleIncrement}>
@@ -59,6 +59,8 @@ export default function Schedule() {
 						</InputGroup.Button>
 					</InputGroup>
 				</FormGroup>
+				<DaySelector />
+				<FormGroup></FormGroup>
 			</Form>
 		</Container>
 	);