Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
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 'react-big-calendar/lib/sass/styles.scss'
import { axios } from '../../utils'

moment.locale('es-ES')
const localizer = momentLocalizer(moment)

const CalendarPage = () => {
  const [events, setEvents] = useState([])

  useEffect(() => {
    axios.get('/calendar/events').then((response) => {
      const events = response.data

      const formattedData = events.map((event) => ({
        ...event,
        start: new Date(event.start),
        end: new Date(event.start),
      }))

      setEvents(formattedData)
    })
  }, [])

  return (
    <Container as="main" className="px-0">
      <Grid container spacing={2}>
        <Grid item xs={12} md={8} spacing={3}>
          <Calendar
            views={['day', 'week', 'month']}
            selectable
            localizer={localizer}
            defaultDate={new Date()}
            defaultView="month"
            onSelectEvent={(event) => alert(event.title)}
            events={events}
            messages={{
              next: <ArrowForwardIosIcon />,
              previous: <ArrowBackIosIcon />,
              today: 'Hoy',
              month: 'Mes',
              week: 'Semana',
              day: 'Día',
            }}
            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>
  )
}

export default CalendarPage