Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 201
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
Línea 39... Línea 39...
39 
          ? eventStart
 39 
          ? eventStart
40 
          : new Date(event.end.replace(/-/g, '/'))
 40 
          : new Date(event.end.replace(/-/g, "/"));
41 
 
 41 
 
Línea 42... Línea 42...
42 
        return {
 42 
        return {
43 
          ...event,
 43 
          ...event,
- 
 
 44 
          start: eventStart,
- 
 
 45 
          end: eventEnd,
44 
          start: eventStart,
 46 
        };
- 
 
 47 
      });
- 
 
 48 
 
45 
          end: eventEnd,
 49 
      setEvents(formattedData);
46 
        }
 50 
    });
47 
      })
 51 
  }, []);
48 
 
 52 
 
49 
      setEvents(formattedData)
 53 
  return (
50 
    })
 54 
    <>
51 
  }, [])
 55 
      <Container
52 
 
 56 
        as="main"
53 
  return (
 57 
        className="px-0"
54 
    <>
 58 
        sx={{ height: "100%", maxHeight: "70vh" }}
55 
      <Container as="main" className="px-0">
 59 
      >
56 
        <Grid container spacing={2}>
 60 
        <Grid container spacing={2} sx={{ height: "100%" }}>
57 
          <Grid item xs={12} md={8} spacing={3}>
 61 
          <Grid item xs={12} md={8} spacing={3}>
58 
            <Calendar
 62 
            <Calendar
59 
              views={['month', 'week', 'day', 'agenda']}
 63 
              views={["month", "week", "day", "agenda"]}
60 
              selectable
 64 
              selectable
61 
              localizer={localizer}
 65 
              localizer={localizer}
62 
              defaultDate={new Date()}
 66 
              defaultDate={new Date()}
63 
              defaultView="month"
 67 
              defaultView="month"
64 
              onSelectEvent={selectEvent}
 68 
              onSelectEvent={selectEvent}
65 
              events={events}
 69 
              events={events}
66 
              messages={{
 70 
              messages={{
67 
                next: <ArrowForwardIosIcon />,
 71 
                next: <ArrowForwardIosIcon />,
68 
                previous: <ArrowBackIosIcon />,
 72 
                previous: <ArrowBackIosIcon />,
69 
                today: 'Hoy',
 73 
                today: "Hoy",
70 
                month: 'Mes',
 74 
                month: "Mes",
71 
                week: 'Semana',
 75 
                week: "Semana",
72 
                day: 'Día',
 76 
                day: "Día",
73 
                agenda: 'Agenda',
 77 
                agenda: "Agenda",
74 
                allDay: 'Todo el día',
 78 
                allDay: "Todo el día",
75 
                date: 'Fecha',
 79 
                date: "Fecha",
76 
                time: 'Hora',
 80 
                time: "Hora",
77 
                event: 'Evento',
 81 
                event: "Evento",
78 
                showMore: 'Ver más',
 82 
                showMore: "Ver más",
79 
                noEventsInRange: 'Sin eventos disponibles',
 83 
                noEventsInRange: "Sin eventos disponibles",
80 
              }}
 84 
              }}
Línea 96... Línea 100...
96 
        show={modalShow}
 100 
        show={modalShow}
97 
        event={selectedEvent}
 101 
        event={selectedEvent}
98 
        onClose={unselectEvent}
 102 
        onClose={unselectEvent}
99 
      />
 103 
      />
100 
    </>
 104 
    </>
101 
  )
 105 
  );
102 
}
 106 
};
Línea 103... Línea 107...
103 
 
 107