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