/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 vote230 views1 answer
Reactnative print in ios
Javascript React
2 votes221 views2 answers
React native position absolute center
Javascript React
0 vote228 views1 answer
Evaluating '_reactNativeImageCropPicker.default.openCamera
Javascript React
5 votes241 views1 answer
Deploy react js heroku
Javascript React
0 vote209 views1 answer
React features
Javascript React
0 vote215 views1 answer
Shallow render in react
Javascript React
1 vote217 views1 answer
When i go srource in react app in chrome i see my files
Javascript React
6 votes185 views2 answers
React native socket io
Javascript React
0 vote228 views1 answer
React hooks update parent state from child
Javascript React
0 vote221 views1 answer
Get started with datagrid in react js
Javascript React