Calendar events using React MUI
Tags: webdev, javascript, react, website
Published: 2024-05-28 05:23:07

`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,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
} from "@mui/material";
import Header from "../../components/Header";
import { tokens } from "../../theme";

const Calendar = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);
  const [currentEvents, setCurrentEvents] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [newEventTitle, setNewEventTitle] = useState("");
  const [selectedDate, setSelectedDate] = useState(null);
  const [deletingEventId, setDeletingEventId] = useState(null); // State to track the event being deleted

  const handleDateClick = (selected) => {
    setSelectedDate(selected.date);
    setNewEventTitle("");
    setIsOpen(true);
  };

  const handleEventClick = (selected) => {
    setDeletingEventId(selected.event.id); // Set the event ID to be deleted
    setIsOpen(true);
  };

  const handleDeleteEvent = () => {
    // Filter out the event with the deletingEventId
    setCurrentEvents(currentEvents.filter((event) => event.id !== deletingEventId));
    setIsOpen(false); // Close the confirmation dialog
    setDeletingEventId(null); // Reset deletingEventId
  };

  const handleAddEvent = () => {
    if (!selectedDate || !newEventTitle) return;

    const newEvent = {
      id: `${new Date().toISOString()}-${newEventTitle}`,
      title: newEventTitle,
      start: selectedDate,
      allDay: true, // Assuming all events are all-day for simplicity
    };

    setCurrentEvents([...currentEvents, newEvent]);
    setIsOpen(false);
  };

  return (
    <Box m="20px">
      <Header title="Calendar" subtitle="Holiday 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">Events</Typography>
          <List>
            {currentEvents.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>
                  }
                />
                <Button
                  variant="outlined"
                  color="secondary"
                  onClick={() => handleEventClick({ event })}
                >
                  Delete
                </Button>
              </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={true}
            selectable={true}
            selectMirror={true}
            dayMaxEvents={true}
            events={currentEvents} // Pass currentEvents to FullCalendar
            eventClick={handleEventClick}
            dateClick={handleDateClick}
            eventDidMount={(info) => {
              info.el.style.backgroundColor = colors.greenAccent[500];
            }}
          />
        </Box>
      </Box>

      {/* DELETE EVENT DIALOG */}
      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <DialogTitle>Confirm Delete Event</DialogTitle>
        <DialogContent>
          <Typography>
            Are you sure you want to delete this event?
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setIsOpen(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDeleteEvent} color="secondary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>

      {/* ADD EVENT DIALOG */}
      <Dialog open={isOpen && !deletingEventId} onClose={() => setIsOpen(false)}>
        <Box p="20px">
          <Typography variant="h6" gutterBottom>
            Add New Event
          </Typography>
          <TextField
            label="Event Title"
            value={newEventTitle}
            onChange={(e) => setNewEventTitle(e.target.value)}
            fullWidth
            variant="outlined"
            margin="normal"
          />
          <Button
            variant="contained"
            color="primary"
            onClick={handleAddEvent}
          >
            Add Event
          </Button>
        </Box>
      </Dialog>
    </Box>
  );
};

export default Calendar;
`