/Javascript/React/Fullcalendar edit event modal react

Fullcalendar edit event modal react

    import React from "react";
    import FullCalendar from "@fullcalendar/react";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
    import axios from 'axios';
    import "../main.scss";

    import "@fullcalendar/core/main.css";
    import "@fullcalendar/daygrid/main.css";
    import "@fullcalendar/timegrid/main.css";


    export default class CalendarView extends React.Component {
      calendarComponentRef = React.createRef();

      state = {
        modal: false,
        calendarWeekends: true,
        event: []
      };

    componentDidMount() {
        axios.get('/events')
          .then(response => {
            this.setState({event: response.data})
            console.log({calendarEvents: response.data})
          })
          .catch(function (error) {
            console.log(error);
          })
      }

      toggle = () => {
        this.setState({ modal: !this.state.modal });
      };

      handleEventClick = ({ event, el }) => {
        this.toggle();
        this.setState({ event });
      };

      render() {
        return (
          <div className="cal-container">
            <div style={{marginTop: 30}}>
              <FullCalendar
                defaultView="timeGridDay"
                header={{
                  left: "prev,next today",
                  center: "title",
                  right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                }}
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                ref={this.calendarComponentRef}
                weekends={this.state.calendarWeekends}
                events={this.state.event}
                eventClick={this.handleEventClick}
                nowIndicator='true'
                height='parent'
              />
              <Modal
              isOpen={this.state.modal}
              toggle={this.toggle}
            >
              <ModalHeader toggle={this.toggle}>
                EVENT TITLE SHOULD GO HERE: {this.state.event.title}
              </ModalHeader>
              <ModalBody>
                <div>
                  EVENT INFO SHOULD GO HERE: {this.state.event.start}
                </div>
              </ModalBody>
              <ModalFooter>
                <Button color="primary">Do Something</Button>{" "}
                <Button color="secondary" onClick={this.toggle}>
                  Cancel
                </Button>
              </ModalFooter>
            </Modal>
            </div>
          </div>
        );
      }
    }

Source: stackoverflow.com

Similar codes

0 vote136 views1 answer
How to get parent's ref react
Javascript React
0 vote126 views1 answer
React native svg size
Javascript React
0 vote119 views1 answer
Onpress not working with usestate react native
Javascript React
0 vote145 views1 answer
Easy REACT download image
Javascript React
1 vote124 views1 answer
React native could not get batchedbridge
Javascript React
1 vote129 views1 answer
React native slow performance after load iamges
Javascript React
2 votes116 views1 answer
How to get current URL with Javascript or React
Javascript React
0 vote146 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
3 votes115 views1 answer
Render image url in react native
Javascript React
2 votes133 views2 answers
Video in react native stack overflow
Javascript React