Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";

import { axios } from "../../utils";

import { Container, Grid } from "@mui/material";

import { Calendar, momentLocalizer } from "react-big-calendar";

import moment from "moment";

import EventsList from "../../components/calendar/EventsList";

import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";

import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";

import EventModal from "../../components/calendar/EventModal";

import "react-big-calendar/lib/sass/styles.scss";

moment.locale("es-ES");

const localizer = momentLocalizer(moment);

const CalendarPage = () => {

  const [events, setEvents] = useState([]);

  const [selectedEvent, setSelectedEvent] = useState(null);

  const [modalShow, setModalShow] = useState(false);

  const selectEvent = (event) => {

    setSelectedEvent(event);

    setModalShow(true);

  };

  const unselectEvent = () => {

    setSelectedEvent(null);

    setModalShow(false);

  };

  useEffect(() => {

    axios.get("/calendar/events").then((response) => {

      const events = response.data;

      const formattedData = events.map((event) => {

        const eventStart = new Date(event.start.replace(/-/g, "/"));

        const eventEnd = event.allDay

          ? eventStart

          : new Date(event.end.replace(/-/g, "/"));

        return {

          ...event,

          start: eventStart,

          end: eventEnd,

        };

      });

      setEvents(formattedData);

    });

  }, []);

  return (

    <>

      <Container

        as="main"

        className="px-0"

        sx={{ height: "100%", maxHeight: "70vh" }}

      >

        <Grid container spacing={2} sx={{ height: "100%" }}>

          <Grid item xs={12} md={8} spacing={3}>

            <Calendar

              views={["month", "week", "day", "agenda"]}

              selectable

              localizer={localizer}

              defaultDate={new Date()}

              defaultView="month"

              onSelectEvent={selectEvent}

              events={events}

              messages={{

                next: <ArrowForwardIosIcon />,

                previous: <ArrowBackIosIcon />,

                today: "Hoy",

                month: "Mes",

                week: "Semana",

                day: "Día",

                agenda: "Agenda",

                allDay: "Todo el día",

                date: "Fecha",

                time: "Hora",

                event: "Evento",

                showMore: "Ver más",

                noEventsInRange: "Sin eventos disponibles",

              }}

              eventPropGetter={(event) => {

                const backgroundColor = event.backgroundColor

                  ? event.backgroundColor

                  : "blue";

                const color = event.textColor ? event.textColor : "#fff";

                return { style: { backgroundColor, color } };

              }}

            />

          </Grid>

          <Grid item xs={12} md={4}>

            <EventsList />

          </Grid>

        </Grid>

      </Container>

      <EventModal

        show={modalShow}

        event={selectedEvent}

        onClose={unselectEvent}

      />

    </>

  );

};

export default CalendarPage;