fullcalendar edit event modal react

1
2    import React from "react";
3    import FullCalendar from "@fullcalendar/react";
4    import dayGridPlugin from "@fullcalendar/daygrid";
5    import timeGridPlugin from "@fullcalendar/timegrid";
6    import interactionPlugin from "@fullcalendar/interaction";
7    import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
8    import axios from 'axios';
9    import "../main.scss";
10
11    import "@fullcalendar/core/main.css";
12    import "@fullcalendar/daygrid/main.css";
13    import "@fullcalendar/timegrid/main.css";
14
15
16    export default class CalendarView extends React.Component {
17      calendarComponentRef = React.createRef();
18
19      state = {
20        modal: false,
21        calendarWeekends: true,
22        event: []
23      };
24
25    componentDidMount() {
26        axios.get('/events')
27          .then(response => {
28            this.setState({event: response.data})
29            console.log({calendarEvents: response.data})
30          })
31          .catch(function (error) {
32            console.log(error);
33          })
34      }
35
36      toggle = () => {
37        this.setState({ modal: !this.state.modal });
38      };
39
40      handleEventClick = ({ event, el }) => {
41        this.toggle();
42        this.setState({ event });
43      };
44
45      render() {
46        return (
47          <div className="cal-container">
48            <div style={{marginTop: 30}}>
49              <FullCalendar
50                defaultView="timeGridDay"
51                header={{
52                  left: "prev,next today",
53                  center: "title",
54                  right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
55                }}
56                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
57                ref={this.calendarComponentRef}
58                weekends={this.state.calendarWeekends}
59                events={this.state.event}
60                eventClick={this.handleEventClick}
61                nowIndicator='true'
62                height='parent'
63              />
64              <Modal
65              isOpen={this.state.modal}
66              toggle={this.toggle}
67            >
68              <ModalHeader toggle={this.toggle}>
69                EVENT TITLE SHOULD GO HERE: {this.state.event.title}
70              </ModalHeader>
71              <ModalBody>
72                <div>
73                  EVENT INFO SHOULD GO HERE: {this.state.event.start}
74                </div>
75              </ModalBody>
76              <ModalFooter>
77                <Button color="primary">Do Something</Button>{" "}
78                <Button color="secondary" onClick={this.toggle}>
79                  Cancel
80                </Button>
81              </ModalFooter>
82            </Modal>
83            </div>
84          </div>
85        );
86      }
87    }
88