From f20deab9e80beb83843a8426a11677ad01e40b89 Mon Sep 17 00:00:00 2001 From: Fezzopro Date: Thu, 16 Nov 2023 21:29:55 +0200 Subject: [PATCH 1/4] Add full calendar packages --- package-lock.json | 171 +++++++++++++++++++++++++++++++++++----------- package.json | 10 +-- 2 files changed, 137 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index e0428bc..943119e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,10 +10,12 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@fullcalendar/core": "^6.1.8", - "@fullcalendar/daygrid": "^6.1.8", - "@fullcalendar/list": "^6.1.8", - "@fullcalendar/timegrid": "^6.1.8", + "@fullcalendar/core": "^5.11.3", + "@fullcalendar/daygrid": "^5.11.3", + "@fullcalendar/interaction": "^5.11.3", + "@fullcalendar/list": "^5.11.3", + "@fullcalendar/react": "^5.11.3", + "@fullcalendar/timegrid": "^5.11.3", "@mui/icons-material": "^5.13.7", "@mui/material": "^5.13.7", "@mui/x-data-grid": "^6.9.2", @@ -2651,39 +2653,81 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, + "node_modules/@fullcalendar/common": { + "version": "5.11.5", + "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.11.5.tgz", + "integrity": "sha512-3iAYiUbHXhjSVXnYWz27Od2cslztUPsOwiwKlfGvQxBixv2Kl6a8IPwaijKFYJHXdwYmfPoEgK7rvqAGVoIYwA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, "node_modules/@fullcalendar/core": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.9.tgz", - "integrity": "sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==", + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.11.3.tgz", + "integrity": "sha512-YUFxCvVJytUwFeXCx4J17kFMM7Ixwn9zBjVRw5NM2bMwgR6VAhSnlZc6yNQSOIy7Hj2TF0vDkO/4JNlTvxyAXw==", "dependencies": { - "preact": "~10.12.1" + "@fullcalendar/common": "~5.11.3", + "preact": "^10.0.5", + "tslib": "^2.1.0" } }, "node_modules/@fullcalendar/daygrid": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.9.tgz", - "integrity": "sha512-o/6joH/7lmVHXAkbaa/tUbzWYnGp/LgfdiFyYPkqQbjKEeivNZWF1WhHqFbhx0zbFONSHtrvkjY2bjr+Ef2quQ==", - "peerDependencies": { - "@fullcalendar/core": "~6.1.9" + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.3.tgz", + "integrity": "sha512-PCK0y80DRNCzWuC5lGpIWqCgKDvql1ah7rXql5lu+Gn2EeFj15ZQ8diMFjtNIQucEmFaNOXnR05Pgcry1n6Shg==", + "dependencies": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" + } + }, + "node_modules/@fullcalendar/interaction": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.11.3.tgz", + "integrity": "sha512-L955wkDjza62K96ndstvYs2Fd4V0kayTDpqW8W7huFG3Ox8MutpLqKAa2SCaTvcNIlWS4oexGQRiQAaJG7u47A==", + "dependencies": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" } }, "node_modules/@fullcalendar/list": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.9.tgz", - "integrity": "sha512-OCKdC1Gz26cJ5QsXdQyXVyzVu23ypT2xzyAR+Wc8jEytcJLWXw2a914m/MVax8n8EHuaIYY2exhsy/eaSU0XNA==", - "peerDependencies": { - "@fullcalendar/core": "~6.1.9" + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-5.11.3.tgz", + "integrity": "sha512-6m9rJPzB5XfJZg+MlgVpha1cI3NUDeyV3GOmojJWZuti05NfDP4f0lzFUul8W7m1DQcjGS2UPRNE8HouA3guEA==", + "dependencies": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" } }, - "node_modules/@fullcalendar/timegrid": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.9.tgz", - "integrity": "sha512-le7UV05wVE1Trdr054kgJXTwa+A1pEI8nlCBnPWdcyrL+dTLoPvQ4AWEVCnV7So+4zRYaCqnqGXfCJsj0RQa0g==", + "node_modules/@fullcalendar/react": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.11.3.tgz", + "integrity": "sha512-pxk6da5V1Mn41M664phQ1cr+0QbhXqkDHUhAVp8OOBrtMW84nhs82IYWTZNA3cbFCn4aUgoG2oGnyxekSF3pYA==", "dependencies": { - "@fullcalendar/daygrid": "~6.1.9" + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" }, "peerDependencies": { - "@fullcalendar/core": "~6.1.9" + "react": "^16.7.0 || ^17 || ^18", + "react-dom": "^16.7.0 || ^17 || ^18" + } + }, + "node_modules/@fullcalendar/timegrid": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.11.3.tgz", + "integrity": "sha512-SjIj2ZQ7nTyL1RxZkCPvNbuUQ0xHT+gfYJdUL3FT4bPjPJCxWtQ2CL8hxaeNmVozYYuy0yrGTW5Oup2+9IplbA==", + "dependencies": { + "@fullcalendar/common": "~5.11.3", + "@fullcalendar/daygrid": "~5.11.3", + "tslib": "^2.1.0" + } + }, + "node_modules/@fullcalendar/timegrid/node_modules/@fullcalendar/daygrid": { + "version": "5.11.5", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.5.tgz", + "integrity": "sha512-hMpq0U3Nucys2jDD+crbkJCr+tVt3fDw04OE3fbpisuzqtrHxIzRmnUOdbWUjJQyToAAkt7UVUQ9E7hYdmvyGA==", + "dependencies": { + "@fullcalendar/common": "~5.11.5", + "tslib": "^2.1.0" } }, "node_modules/@humanwhocodes/config-array": { @@ -25660,32 +25704,79 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, + "@fullcalendar/common": { + "version": "5.11.5", + "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.11.5.tgz", + "integrity": "sha512-3iAYiUbHXhjSVXnYWz27Od2cslztUPsOwiwKlfGvQxBixv2Kl6a8IPwaijKFYJHXdwYmfPoEgK7rvqAGVoIYwA==", + "requires": { + "tslib": "^2.1.0" + } + }, "@fullcalendar/core": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.9.tgz", - "integrity": "sha512-eeG+z9BWerdsU9Ac6j16rpYpPnE0wxtnEHiHrh/u/ADbGTR3hCOjCD9PxQOfhOTHbWOVs7JQunGcksSPu5WZBQ==", + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.11.3.tgz", + "integrity": "sha512-YUFxCvVJytUwFeXCx4J17kFMM7Ixwn9zBjVRw5NM2bMwgR6VAhSnlZc6yNQSOIy7Hj2TF0vDkO/4JNlTvxyAXw==", "requires": { - "preact": "~10.12.1" + "@fullcalendar/common": "~5.11.3", + "preact": "^10.0.5", + "tslib": "^2.1.0" } }, "@fullcalendar/daygrid": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.9.tgz", - "integrity": "sha512-o/6joH/7lmVHXAkbaa/tUbzWYnGp/LgfdiFyYPkqQbjKEeivNZWF1WhHqFbhx0zbFONSHtrvkjY2bjr+Ef2quQ==", - "requires": {} + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.3.tgz", + "integrity": "sha512-PCK0y80DRNCzWuC5lGpIWqCgKDvql1ah7rXql5lu+Gn2EeFj15ZQ8diMFjtNIQucEmFaNOXnR05Pgcry1n6Shg==", + "requires": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" + } + }, + "@fullcalendar/interaction": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.11.3.tgz", + "integrity": "sha512-L955wkDjza62K96ndstvYs2Fd4V0kayTDpqW8W7huFG3Ox8MutpLqKAa2SCaTvcNIlWS4oexGQRiQAaJG7u47A==", + "requires": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" + } }, "@fullcalendar/list": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.9.tgz", - "integrity": "sha512-OCKdC1Gz26cJ5QsXdQyXVyzVu23ypT2xzyAR+Wc8jEytcJLWXw2a914m/MVax8n8EHuaIYY2exhsy/eaSU0XNA==", - "requires": {} + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-5.11.3.tgz", + "integrity": "sha512-6m9rJPzB5XfJZg+MlgVpha1cI3NUDeyV3GOmojJWZuti05NfDP4f0lzFUul8W7m1DQcjGS2UPRNE8HouA3guEA==", + "requires": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" + } + }, + "@fullcalendar/react": { + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.11.3.tgz", + "integrity": "sha512-pxk6da5V1Mn41M664phQ1cr+0QbhXqkDHUhAVp8OOBrtMW84nhs82IYWTZNA3cbFCn4aUgoG2oGnyxekSF3pYA==", + "requires": { + "@fullcalendar/common": "~5.11.3", + "tslib": "^2.1.0" + } }, "@fullcalendar/timegrid": { - "version": "6.1.9", - "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.9.tgz", - "integrity": "sha512-le7UV05wVE1Trdr054kgJXTwa+A1pEI8nlCBnPWdcyrL+dTLoPvQ4AWEVCnV7So+4zRYaCqnqGXfCJsj0RQa0g==", + "version": "5.11.3", + "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.11.3.tgz", + "integrity": "sha512-SjIj2ZQ7nTyL1RxZkCPvNbuUQ0xHT+gfYJdUL3FT4bPjPJCxWtQ2CL8hxaeNmVozYYuy0yrGTW5Oup2+9IplbA==", "requires": { - "@fullcalendar/daygrid": "~6.1.9" + "@fullcalendar/common": "~5.11.3", + "@fullcalendar/daygrid": "~5.11.3", + "tslib": "^2.1.0" + }, + "dependencies": { + "@fullcalendar/daygrid": { + "version": "5.11.5", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.11.5.tgz", + "integrity": "sha512-hMpq0U3Nucys2jDD+crbkJCr+tVt3fDw04OE3fbpisuzqtrHxIzRmnUOdbWUjJQyToAAkt7UVUQ9E7hYdmvyGA==", + "requires": { + "@fullcalendar/common": "~5.11.5", + "tslib": "^2.1.0" + } + } } }, "@humanwhocodes/config-array": { diff --git a/package.json b/package.json index 9c8e6e0..7f2fd18 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@fullcalendar/core": "^6.1.8", - "@fullcalendar/daygrid": "^6.1.8", - "@fullcalendar/list": "^6.1.8", - "@fullcalendar/timegrid": "^6.1.8", + "@fullcalendar/core": "^5.11.3", + "@fullcalendar/daygrid": "^5.11.3", + "@fullcalendar/interaction": "^5.11.3", + "@fullcalendar/list": "^5.11.3", + "@fullcalendar/react": "^5.11.3", + "@fullcalendar/timegrid": "^5.11.3", "@mui/icons-material": "^5.13.7", "@mui/material": "^5.13.7", "@mui/x-data-grid": "^6.9.2", From 2368e82c98bd9991389cc48b84e0fe09e28cb6b8 Mon Sep 17 00:00:00 2001 From: Fezzopro Date: Thu, 16 Nov 2023 21:30:24 +0200 Subject: [PATCH 2/4] Permit calendar route --- src/App.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index fdcff33..c8b9342 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ import Form from './scenes/Form'; // import Pie from './scenes/Pie'; // import FAQ from './scenes/FAQ'; // import Geograph from './scenes/Geograph'; -// import Calendar from './scenes/Calendar'; +import Calendar from './scenes/Calendar'; function App() { const [theme, coloMode] = useMode(); @@ -36,8 +36,8 @@ function App() { } /> } /> } /> - } /> - } /> */} + } /> */} + } /> From 871d47b95a07f659444b04a0310d28bc2713589c Mon Sep 17 00:00:00 2001 From: Fezzopro Date: Thu, 16 Nov 2023 21:30:55 +0200 Subject: [PATCH 3/4] Add calendar scene --- src/scenes/Calendar/index.jsx | 108 ++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 src/scenes/Calendar/index.jsx diff --git a/src/scenes/Calendar/index.jsx b/src/scenes/Calendar/index.jsx new file mode 100644 index 0000000..43e588e --- /dev/null +++ b/src/scenes/Calendar/index.jsx @@ -0,0 +1,108 @@ +import { useState } from 'react'; +import FullCalendar, { formatDate } from '@fullcalendar/react'; +import dayGridPlugin from '@fullcalendar/daygrid'; +import timeGridPlugin from '@fullcalendar/timegrid'; +import interactionPlugin from '@fullcalendar/interaction'; +import listPlugin from '@fullcalendar/list'; +import { + Box, + List, + ListItem, + ListItemText, + Typography, + useTheme, +} from '@mui/material'; +import Header from '../../components/Shared/Header/Header'; +import { tokens } from '../../theme'; + +const Calendar = () => { + const theme = useTheme(); + const colors = tokens(theme.palette.mode); + const [currentEvent, setCurrentEvent] = useState([]); + + const handleDateClick = (selected) => { + const title = prompt('Please Enter a new title for your event'); + const calendarAPI = selected.view.calendar; + calendarAPI.unselect(); + + if (title) { + calendarAPI.addEvent({ + id: `${selected.dateStr}-${title}`, + title, + start: selected.startStr, + end: selected.endStr, + allDay: selected.allDay, + }); + } + }; + + const handleEventClick = (selected) => { + if (window.confirm(`Are you sure you want to delete this event '${selected.event.title}'`)) { + selected.event.remove(); + } + }; + + return ( + +
+ + {/* CALENDAR SIDEBAR */} + + Event + + {currentEvent.map((event) => ( + + + {formatDate(event.start, { + year: 'numeric', + month: 'short', + day: 'numeric', + })} + + } + /> + + ))} + + + {/* CALENDAR */} + + setCurrentEvent(event)} + /> + + + + ); +}; + +export default Calendar; From 707633b93819b04ea89fc0197461a57c7ab34f7e Mon Sep 17 00:00:00 2001 From: Fezzopro Date: Thu, 16 Nov 2023 21:55:12 +0200 Subject: [PATCH 4/4] Add initial events to the calendar --- src/scenes/Calendar/index.jsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/scenes/Calendar/index.jsx b/src/scenes/Calendar/index.jsx index 43e588e..923df54 100644 --- a/src/scenes/Calendar/index.jsx +++ b/src/scenes/Calendar/index.jsx @@ -61,7 +61,7 @@ const Calendar = () => { > {formatDate(event.start, { year: 'numeric', @@ -69,7 +69,7 @@ const Calendar = () => { day: 'numeric', })} - } + )} /> ))} @@ -96,8 +96,20 @@ const Calendar = () => { selectMirror dayMaxEvents select={handleDateClick} - handleEventClick={handleEventClick} + eventClick={handleEventClick} eventsSet={(event) => setCurrentEvent(event)} + initialEvents={[ + { + id: 138, + title: 'First Event', + date: '2023-11-15', + }, + { + id: 146, + title: 'Second Event', + date: '2023-11-15', + }, + ]} />