Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 202 | Rev 725 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 202 Rev 706
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from "../../utils";
 2 
import { axios } from '../../utils'
3 
import { Container, Grid } from "@mui/material";
 3 
import { Container, Grid } from '@mui/material'
4 
import { Calendar, momentLocalizer } from "react-big-calendar";
 4 
import { Calendar, momentLocalizer } from 'react-big-calendar'
5 
import moment from "moment";
 5 
import moment from 'moment'
6 
import EventsList from "../../components/calendar/EventsList";
 6 
import EventsList from '../../components/calendar/EventsList'
7 
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
 7 
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
8 
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 8 
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
Línea 9... Línea 9...
9 
 
 9 
 
Línea 10... Línea 10...
10 
import EventModal from "../../components/calendar/EventModal";
 10 
import EventModal from '../../components/calendar/EventModal'
Línea 11... Línea 11...
11 
 
 11 
 
12 
import "react-big-calendar/lib/sass/styles.scss";
 12 
import 'react-big-calendar/lib/sass/styles.scss'
Línea 13... Línea 13...
13 
 
 13 
 
14 
moment.locale("es-ES");
 14 
moment.locale('es-ES')
15 
const localizer = momentLocalizer(moment);
 15 
const localizer = momentLocalizer(moment)
16 
 
 16 
 
Línea 17... Línea 17...
17 
const CalendarPage = () => {
 17 
const CalendarPage = () => {
18 
  const [events, setEvents] = useState([]);
 18 
  const [events, setEvents] = useState([])
19 
  const [selectedEvent, setSelectedEvent] = useState(null);
 19 
  const [selectedEvent, setSelectedEvent] = useState(null)
20 
  const [modalShow, setModalShow] = useState(false);
 20 
  const [modalShow, setModalShow] = useState(false)
Línea 21... Línea 21...
21 
 
 21 
 
22 
  const selectEvent = (event) => {
 22 
  const selectEvent = (event) => {
23 
    setSelectedEvent(event);
 23 
    setSelectedEvent(event)
24 
    setModalShow(true);
 24 
    setModalShow(true)
Línea 25... Línea 25...
25 
  };
 25 
  }
26 
 
 26 
 
27 
  const unselectEvent = () => {
 27 
  const unselectEvent = () => {
Línea 28... Línea 28...
28 
    setSelectedEvent(null);
 28 
    setSelectedEvent(null)
29 
    setModalShow(false);
 29 
    setModalShow(false)
30 
  };
 30 
  }
31 
 
 31 
 
32 
  useEffect(() => {
 32 
  useEffect(() => {
Línea 33... Línea 33...
33 
    axios.get("/calendar/events").then((response) => {
 33 
    axios.get('/calendar/events').then((response) => {
34 
      const events = response.data;
 34 
      const events = response.data
35 
 
 35 
 
36 
      const formattedData = events.map((event) => {
 36 
      const formattedData = events.map((event) => {
37 
        const eventStart = new Date(event.start.replace(/-/g, "/"));
 37 
        const eventStart = new Date(event.start.replace(/-/g, '/'))
38 
        const eventEnd = event.allDay
 38 
        const eventEnd = event.allDay
39 
          ? eventStart
 39 
          ? eventStart
40 
          : new Date(event.end.replace(/-/g, "/"));
 40 
          : new Date(event.end.replace(/-/g, '/'))
41 
 
 41 
 
42 
        return {
 42 
        return {
Línea 43... Línea 43...
43 
          ...event,
 43 
          ...event,
44 
          start: eventStart,
 44 
          start: eventStart,
45 
          end: eventEnd,
 45 
          end: eventEnd
46 
        };
 46 
        }
47 
      });
 47 
      })
48 
 
 48 
 
49 
      setEvents(formattedData);
 49 
      setEvents(formattedData)
50 
    });
 50 
    })
51 
  }, []);
 51 
  }, [])
52 
 
 52 
 
53 
  return (
 53 
  return (
54 
    <>
 54 
    <>
55 
      <Container as="main">
 55 
      <Container as='main'>
56 
        <Grid container spacing={2}>
 56 
        <Grid container spacing={2}>
57 
          <Grid item xs={12} md={8} spacing={3}>
 57 
          <Grid item xs={12} md={8} spacing={3}>
58 
            <Calendar
 58 
            <Calendar
59 
              views={["month", "week", "day", "agenda"]}
 59 
              views={['month', 'week', 'day', 'agenda']}
60 
              selectable
 60 
              selectable
61 
              localizer={localizer}
 61 
              localizer={localizer}
62 
              defaultDate={new Date()}
 62 
              defaultDate={new Date()}
63 
              defaultView="month"
 63 
              defaultView='month'
64 
              onSelectEvent={selectEvent}
 64 
              onSelectEvent={selectEvent}
65 
              events={events}
 65 
              events={events}
66 
              messages={{
 66 
              messages={{
67 
                next: <ArrowForwardIosIcon />,
 67 
                next: <ArrowForwardIosIcon />,
68 
                previous: <ArrowBackIosIcon />,
 68 
                previous: <ArrowBackIosIcon />,
69 
                today: "Hoy",
 69 
                today: 'Hoy',
70 
                month: "Mes",
 70 
                month: 'Mes',
71 
                week: "Semana",
 71 
                week: 'Semana',
72 
                day: "Día",
 72 
                day: 'Día',
73 
                agenda: "Agenda",
 73 
                agenda: 'Agenda',
74 
                allDay: "Todo el día",
 74 
                allDay: 'Todo el día',
75 
                date: "Fecha",
 75 
                date: 'Fecha',
76 
                time: "Hora",
 76 
                time: 'Hora',
77 
                event: "Evento",
 77 
                event: 'Evento',
78 
                showMore: "Ver más",
 78 
                showMore: 'Ver más',
79 
                noEventsInRange: "Sin eventos disponibles",
 79 
                noEventsInRange: 'Sin eventos disponibles'
80 
              }}
 80 
              }}
81 
              eventPropGetter={(event) => {
 81 
              eventPropGetter={(event) => {
Línea 96... Línea 96...
96 
        show={modalShow}
 96 
        show={modalShow}
97 
        event={selectedEvent}
 97 
        event={selectedEvent}
98 
        onClose={unselectEvent}
 98 
        onClose={unselectEvent}
99 
      />
 99 
      />
100 
    </>
 100 
    </>
101 
  );
 101 
  )
102 
};
 102 
}
Línea 103... Línea 103...
103 
 
 103