Rev 7288 | Rev 7290 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { 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'
moment.locale('es-ES')
const localizer = momentLocalizer(moment)
const CalendarPage = () => {
const [events, setEvents] = useState([
{
id: 0,
title: 'All Day Event very long title',
allDay: true,
start: new Date('2023-08-30'),
},
])
return (
<Container as="main" className="px-0">
<Grid container spacing={2}>
<Grid item xs={12} md={8} spacing={3}>
<Calendar
views={['day', 'agenda', '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',
}}
/>
</Grid>
<Grid item xs={12} md={4}>
<EventsList />
</Grid>
</Grid>
</Container>
)
}
export default CalendarPage