Rev 3585 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react';
import { axios } from '../../utils';
import { useDispatch } from 'react-redux';
import { Grid } from '@mui/material';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import moment from 'moment';
import { addNotification } from '@store/notification/notification.actions';
import EventsList from '@components/calendar/EventsList';
import EventModal from '@components/calendar/EventModal';
import 'react-big-calendar/lib/css/react-big-calendar.css';
moment.locale('es');
const localizer = momentLocalizer(moment);
const CalendarPage = () => {
const [events, setEvents] = useState([]);
const [selectedEvent, setSelectedEvent] = useState(null);
const [modalShow, setModalShow] = useState(false);
const dispatch = useDispatch();
const selectEvent = (event) => {
setSelectedEvent(event);
setModalShow(true);
};
const unselectEvent = () => {
setSelectedEvent(null);
setModalShow(false);
};
useEffect(() => {
axios
.get('/calendar/events')
.then((response) => {
const { data, success } = response.data;
if (!success) {
const errorMessage =
typeof data === 'string' ? data : 'Error interno. Por favor, intente más tarde.';
throw new Error(errorMessage);
}
const formattedEvents = data.map((event) => {
if (event.allDay) {
return {
...event,
start: new Date(event.start.replace('-', '/')),
end: new Date(event.start.replace('-', '/'))
};
}
return {
...event,
start: new Date(event.start),
end: new Date(event.end)
};
});
setEvents(formattedEvents);
})
.catch((err) => {
dispatch(addNotification({ style: 'danger', msg: err.message }));
});
}, []);
return (
<>
<Grid container spacing={1}>
<Grid size={{ xs: 12, md: 8 }}>
<Calendar
localizer={localizer}
events={events}
views={['month', 'week', 'day']}
popup={false}
defaultDate={new Date()}
defaultView='month'
selectable
onSelectEvent={selectEvent}
onShowMore={(events) => this.setState({ showModal: true, events })}
messages={{
next: <ArrowForwardIosIcon />,
previous: <ArrowBackIosIcon />,
today: 'Hoy',
month: 'Mes',
week: 'Semana',
day: 'Día',
allDay: 'Todo el día',
date: 'Fecha',
time: 'Hora',
event: 'Evento',
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 size={{ xs: 12, md: 4 }}>
<EventsList />
</Grid>
</Grid>
<EventModal show={modalShow} event={selectedEvent} onClose={unselectEvent} />
</>
);
};
export default CalendarPage;