javascript - FullCalendar React App Component 未将事件添加到 Week 和 Day 视图，也没有消磨时间

Question

我正在尝试使用 FullCalendar 来安排活动。我可以添加一个事件，但只能在月视图中。我无法在日视图或周视图中这样做。此外，我似乎无法将在“日”或“周”视图中选择的时间传递给我的计划模式，也不能在添加时返回。我尝试从日期字符串重新格式化时间，它在控制台中看起来是正确的，但它只是没有粘在模态中。任何帮助是极大的赞赏。我试图不使用 FullCalendar 的任何插件或付费选项，并试图坚持使用 Vanilla Javascript。

//调度组件

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import {ScheduleModal} from "./ScheduleModal";
import {Modal,Button,Row,Col, Form,ButtonToolbar} from 'react-bootstrap';
import 'jquery/dist/jquery.min.js'; 
import $ from "jquery";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import '../Schedule.css';
import Header from "./Header";
import { INITIAL_EVENTS, createEventId } from './event-utils'
import { formatDate, formatIsoTimeString } from '@fullcalendar/core'



export default class Schedule extends React.Component {
        calendarComponentRef = React.createRef();
        
  constructor(props){
    super(props);
    this.state = {addModalShow : false, sent : false,
      calendarEvents: [
        // initial event data needs to loop through CourierService table
        { title: "Test Event", start: '2020-06-25' }
      ]}
  }

  state = {
    calendarWeekends: true,
     
  };


//Add Event button handler
  handleAddClick =()=>{
    this.setState({addModalShow: true,
      firstName:null,
      lastName: null,
      cellNum : null})
     
  };
  
        render() {
          
            let addModalClose =() => this.setState({addModalShow: false})
          return (
           
                
                 
                  <div>
                    <Header></Header>
                    <br></br>
                    <br></br>
                    <br></br>
                <div className="demo-app">
                <div className="demo-app-top">
                  
                 <br></br>
                 <br></br>
                  <ButtonToolbar>
                  <Button style={{marginLeft:'170px'}} //onClick ={()=>this.setState({addModalShow: true})}
                  onClick={()=>this.handleAddClick()}
                   >Add Event</Button>
                  <ScheduleModal 
                    show={this.state.addModalShow}
                    onHide = {addModalClose}
                    date = {this.state.date}
                    saveEvent = {this.addEvent}
                    firstName = {this.state.firstName}
                    eventTime = {this.state.eventTime}
                    />
                  </ButtonToolbar>
                </div>
                <div className="demo-app-calendar">
                  <FullCalendar className = 'calendar' id = 'calendar'
                    defaultView="dayGridMonth"
                    header={{
                      left: "prev,next today",
                      center: "title",
                      right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
                    }}
                    titleFormat = {{
                      month: '2-digit',
                      day:'2-digit',
                      year: 'numeric'
                    }}
                    eventTimeFormat= {{
                      hour: "numeric",
                      minute: "2-digit",
                      meridiem: "short",
                    }}

                    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                    ref={this.calendarComponentRef}
                    weekends={this.state.calendarWeekends}
                    selectable={true}
                    editable = {true}
                    eventLimit={true}
                    events={ [...this.state.calendarEvents]}
                    initialEvents = {INITIAL_EVENTS}
                  
                   select ={this.handleSelect}
                    //eventClick ={this.editEvent}
                    //eventContent={renderEventContent}
                    eventsSet={this.handleEvents}
                    //select={this.handleDateSelect}
                    dateClick={this.handleDateClick} // maybe here pass the date and time :(?)
                    displayEventTime= {true}
                    timeFormat ={
                      'hh:mm A'
                    }
                   
                    //slotLabelFormat={"HH:mm"}
                  />
                  
                </div>
              </div>
              </div>
            );
          }
        
          

          toggleWeekends = () => {
            this.setState({
              // update a property
              calendarWeekends: !this.state.calendarWeekends
            });
          };
        
          gotoPast = () => {
            let calendarApi = this.calendarComponentRef.current.getApi();
            calendarApi.gotoDate("2000-01-01"); // call a method on the Calendar object
          };
        



          addEvent =(e,firstName, date,eventTime) =>{
            //let title = prompt('Please enter a new title for your event')
              alert('this is the time',eventTime)
            var array = this.state.calendarEvents;
          array.push({title: firstName, start:this.state.start });
          this.setState({calendarEvents: array,addModalShow: false }); 

                };
                   



   handleSelect = (selectInfo) => {
                  //save the dates
                  console.log() 
                  console.log("handleSelect")
                    this.setState({start: selectInfo.startStr})
                }       
                 
               
          handleDateClick = arg => {
            //this.setState({addShowModule: true})


            
      let eventDate = formatDate(arg.dateStr, {
                      month: '2-digit',
                      day:'2-digit',
                      year: 'numeric'
                 })
     let eventTime = formatDate(arg.dateStr,{

                      hour: "2-digit",
                      minute: "2-digit",
                      meridiem: " long",
     });
     console.log(eventTime)
        this.setState({addModalShow: true,
                      date:arg.dateStr,
                      eventTime: eventTime})
            };
           

          };



         
  

 

//Schedule Modal


import React, {Component} from 'react';
import {Modal,Button,Row,Col, Form} from 'react-bootstrap';




export  class ScheduleModal extends React.Component {
      constructor(props){
        super(props);
        this.state ={
          firstName :null,
          date: null,
          eventTime:null
        }

      }
      
      onClickJobEntry=()=>{    
        
        this.props.history.push('/JobOrderEntryTicket')
       };
     

       
      
handleChange = (event) => {
  event.preventDefault();
 

console.log(event.target.value)
  this.setState({
    
    [event.target.name]: event.target.value
  
  }) }


    render() {

      
        return (
          
          <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header >
            <Modal.Title id="contained-modal-title-vcenter">
            Schedule Pick Up or Delivery
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className = "container">
            
            <Form  onChange ={this.handleChange} >
      <Form.Row>  
      <Form.Group as={Col} controlId="formJobID">
      <Form.Label>JobID</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>1</option>
      </Form.Control>
    </Form.Group>
    <Form.Group as={Col} controlId="formAssignedCourier">
      <Form.Label>Assigned Courier</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Arturo</option>
        <option>Kristofer</option>
      </Form.Control>
    </Form.Group>
    <Form.Group as={Col} controlId="formAssignedCourier">
      <Form.Label>Select Customer</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Jason Statham 305-834-0372</option>
        <option>Will Smith 305-333-4555</option>
      </Form.Control>
    </Form.Group>
    



    </Form.Row>   

    <Form.Row>  
    <Form.Group as={Col} controlId="formServiceRequested">
      <Form.Label>Service</Form.Label>
      <Form.Control as="select" defaultValue="Choose...">
        <option>Pick-Up</option>
        <option>Delivery</option>
      </Form.Control>
    </Form.Group>
    <Form.Group as={Col} controlId="formScheduleDate">
      <Form.Label>Date</Form.Label>
      <Form.Control name = 'date' type='date' value = {this.props.date} >
        
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formScheduleTime">
      <Form.Label>Time</Form.Label>
      <Form.Control name = 'time' type ='time' defaultvalue = {this.props.eventTime}>
      </Form.Control>
    </Form.Group>
    
    </Form.Row>   


  <Form.Row>
    <Form.Group as={Col} controlId="formGridFirstName">
      <Form.Label>First Name</Form.Label>
      <Form.Control name = 'firstName' placeholder="First Name" defaultValue= {this.props.firsName}/>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridLastName">
      <Form.Label>Last Name</Form.Label>
      <Form.Control placeholder="Last Name" />
    </Form.Group>
  </Form.Row>
  <Form.Row>
  <Form.Group as={Col} controlId="formGridPassword">
      <Form.Label>Phone</Form.Label>
      <Form.Control type = "phone" placeholder="Phone" />
    </Form.Group>
    <Form.Group as={Col} controlId="formGridEmail">
      <Form.Label>Email</Form.Label>
      <Form.Control type= "email" placeholder="Email" />
    </Form.Group>

    
  </Form.Row>

  <Form.Group controlId="formGridAddress1">
    <Form.Label>Address</Form.Label>
    <Form.Control placeholder="1234 Main St" />
  </Form.Group>

  <Form.Group controlId="formGridAddress2">
    <Form.Label>Address 2</Form.Label>
    <Form.Control placeholder="Apartment, studio, or floor" />
  </Form.Group>

  <Form.Row>
    <Form.Group as={Col} controlId="formGridCity">
      <Form.Label>City</Form.Label>
      <Form.Control />
    </Form.Group>

    <Form.Group as={Col} controlId="formGridState">
      <Form.Label>State</Form.Label>
      <Form.Control as="select" defaultValue="FL">
        <option>FL</option>
        <option>...</option>
      </Form.Control>
    </Form.Group>

    <Form.Group as={Col} controlId="formGridZip">
      <Form.Label>Zip</Form.Label>
      <Form.Control />
    </Form.Group>
  </Form.Row>

  <Form.Group id="formConfirmed">
    <Form.Check type="checkbox" label="Confirmed" />
  </Form.Group>

  <Button variant="primary"  onClick ={(e)=>this.props.saveEvent(e,this.state.firstName,this.state.date, this.state.eventTime)}>
    Save
  </Button>
  <Button variant="success" /*onClick={(props)=>this.onClickJobEntry}*/>
    Job Order Entry Ticket
  </Button>
  
</Form>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.onHide}>Close</Button>
          </Modal.Footer>
        </Modal>
       
        )}}

标签： javascriptreactjsfullcalendar