From 6c6adbb6f5b4eaf04aad8072e92f8735743a6e3d Mon Sep 17 00:00:00 2001 From: Jubaer Jami Date: Thu, 27 Oct 2022 22:11:16 +0600 Subject: [PATCH] calendar view done --- package-lock.json | 42 +++++++++++ package.json | 2 + src/App.js | 4 +- src/scenes/calendar/index.jsx | 130 ++++++++++++++++++++++++++++++++++ 4 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 src/scenes/calendar/index.jsx diff --git a/package-lock.json b/package-lock.json index 2d8bfeb..8aaf938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,9 @@ "@emotion/styled": "^11.10.4", "@fullcalendar/core": "^5.11.3", "@fullcalendar/daygrid": "^5.11.3", + "@fullcalendar/interaction": "^5.11.3", "@fullcalendar/list": "^5.11.3", + "@fullcalendar/react": "^5.11.2", "@fullcalendar/timegrid": "^5.11.3", "@mui/icons-material": "^5.10.9", "@mui/material": "^5.10.10", @@ -2404,6 +2406,15 @@ "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": "5.11.3", "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-5.11.3.tgz", @@ -2413,6 +2424,19 @@ "tslib": "^2.1.0" } }, + "node_modules/@fullcalendar/react": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.11.2.tgz", + "integrity": "sha512-OnLvfV406VEQcK4QGN8xR4ro6Manp9dKE7/n9dhs19J1kKpqS1w1sIEYg1dT11njbk0Ob+TdF3cXLDFq73jUlA==", + "dependencies": { + "@fullcalendar/common": "~5.11.2", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "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", @@ -19519,6 +19543,15 @@ "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": "5.11.3", "resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-5.11.3.tgz", @@ -19528,6 +19561,15 @@ "tslib": "^2.1.0" } }, + "@fullcalendar/react": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.11.2.tgz", + "integrity": "sha512-OnLvfV406VEQcK4QGN8xR4ro6Manp9dKE7/n9dhs19J1kKpqS1w1sIEYg1dT11njbk0Ob+TdF3cXLDFq73jUlA==", + "requires": { + "@fullcalendar/common": "~5.11.2", + "tslib": "^2.1.0" + } + }, "@fullcalendar/timegrid": { "version": "5.11.3", "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.11.3.tgz", diff --git a/package.json b/package.json index 6207b30..8cdcd7e 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "@emotion/styled": "^11.10.4", "@fullcalendar/core": "^5.11.3", "@fullcalendar/daygrid": "^5.11.3", + "@fullcalendar/interaction": "^5.11.3", "@fullcalendar/list": "^5.11.3", + "@fullcalendar/react": "^5.11.2", "@fullcalendar/timegrid": "^5.11.3", "@mui/icons-material": "^5.10.9", "@mui/material": "^5.10.10", diff --git a/src/App.js b/src/App.js index 16f1959..f0934cd 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 Geography from "./scenes/geography"; -// import Calendar from "./scenes/calendar"; +import Calendar from "./scenes/calendar"; function App() { const [theme, colorMode] = useMode(); @@ -37,7 +37,7 @@ function App() { {/* } /> */} {/* } /> */} {/* } /> */} - {/* } /> */} + } /> diff --git a/src/scenes/calendar/index.jsx b/src/scenes/calendar/index.jsx new file mode 100644 index 0000000..0670b32 --- /dev/null +++ b/src/scenes/calendar/index.jsx @@ -0,0 +1,130 @@ +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/Header"; +import { tokens } from "../../theme"; + +export default function Calendar() { + const theme = useTheme(); + const colors = tokens(theme.palette.mode); + const [currentEvents, setCurrentEvents] = useState([]); + + const handleDateClick = (selected) => { + console.log(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.startStr}-${title}`, + title, + start: selected.startStr, + end: selected.endStr, + allDay: selected.allDay, + }); + } + }; + + const handleEventClick = (selected) => { + if ( + window.confirm( + `Are you sure you want to delete the event '${selected.event.title}'` + ) + ) { + selected.event.remove(); + } + }; + + return ( + +
+ + + {/* CALENDAR SIDEBAR */} + + Events + + {currentEvents.map((event) => ( + + + {formatDate(event.start, { + year: "numeric", + month: "short", + day: "numeric", + })} + + } + /> + + ))} + + + + {/* CALENDAR */} + + setCurrentEvents(events)} + initialEvents={[ + { + id: "12315", + title: "All-day event", + date: "2022-09-14", + }, + { + id: "5123", + title: "Timed event", + date: "2022-09-28", + }, + ]} + /> + + + + ); +}