/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 vote294 views1 answer
React native controlling device brightness
Javascript React
0 vote261 views1 answer
React dynamic load script
Javascript React
1 vote263 views1 answer
Reactive localstorage in react
Javascript React
1 vote269 views1 answer
Conditional style react native
Javascript React
1 vote265 views1 answer
React-redux imports
Javascript React
0 vote255 views1 answer
Reactjs alert
Javascript React
0 vote264 views1 answer
React map gl
Javascript React
0 vote265 views1 answer
How to embed an expression in react js
Javascript React
0 vote266 views1 answer
React native update app from play store ios app store
Javascript React
0 vote294 views1 answer
Create-react-app enviroment variables
Javascript React