Ft add calendar scene

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",

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() {
               <Route path="/pie" element={<Pie />} />
               <Route path="/line" element={<Line />} />
               <Route path="/faq" element={<FAQ />} />
-              <Route path="/geograph" element={<Geograph />} />
-              <Route path="/calendar" element={<Calendar />} /> */}
+              <Route path="/geograph" element={<Geograph />} /> */}
+              <Route path="/calendar" element={<Calendar />} />
             </Routes>
           </main>
         </div>

src/scenes/Calendar/index.jsx

@@ -0,0 +1,120 @@
+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 (
+    <Box m="20px">
+      <Header title="CALENDAR" subTitle="Full Interactive Calendar" />
+      <Box display="flex" justifyContent="space-between">
+        {/* CALENDAR SIDEBAR */}
+        <Box flex="1 1 20%" backgroundColor={colors.primary[400]} p="15px" borderRadius="4px">
+          <Typography variant="h5">Event</Typography>
+          <List>
+            {currentEvent.map((event) => (
+              <ListItem
+                key={event.id}
+                sx={{
+                  backgroundColor: colors.greenAccent[500],
+                  margin: '10px 0',
+                  borderRadius: '2px',
+                }}
+              >
+                <ListItemText
+                  primary={event.title}
+                  secondary={(
+                    <Typography>
+                      {formatDate(event.start, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </Typography>
+                  )}
+                />
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+        {/* CALENDAR */}
+        <Box flex="1 1 100%" ml="15px">
+          <FullCalendar
+            height="75vh"
+            plugins={[
+              dayGridPlugin,
+              timeGridPlugin,
+              interactionPlugin,
+              listPlugin,
+            ]}
+            headerToolbar={{
+              left: 'prev,next,today',
+              center: 'title',
+              right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
+            }}
+            initialView="dayGridMonth"
+            editable
+            selectable
+            selectMirror
+            dayMaxEvents
+            select={handleDateClick}
+            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',
+              },
+            ]}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Calendar;