Breaking News: Grepper is joining You.com. Read the official announcement!

fullcalendar edit event modal react

Nasty Narwhal answered on July 9, 2020 Popularity 6/10 Helpfulness 2/10

answer fullcalendar edit event modal react

fullcalendar edit event modal react

Comment

    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>
        );
      }
    }

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: edit fullcalendar javascript

Link to this answer
Share Copy Link

Contributed on Jul 09 2020

Nasty Narwhal

0 Answers Avg Quality 2/10

fullcalendar edit event modal react

Contents

More Related Answers

fullcalendar edit event modal react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.