Question

我使用primereact的完整日历，但是我需要选择特定的年份和月份。为此，我有单独的日期选择器。但是，当我尝试使用完整日历的gotoDate方法更改日期时，

有错误

“未捕获的TypeError：无法读取null的属性'onViewDateChange'”

//method on datepicker change
  handleChange(date) {
    console.log(date);
    this.setState({
      startDate: date.value,
    });
      const calendarEl = document.getElementById('fullCalendar');
      const calendar = new Calendar(calendarEl);
      calendar.gotoDate(date.value);
      // calendar.gotoDate(this.state.startDate);
    }
  }

//datepicker
<Calendar view="month" dateFormat="mm/yy" value={startDate} onChange={this.handleChange} yearNavigator yearRange="2015:2030"/>
//calendar
 <FullCalendar
                          id="fullCalendar"
                          firstDay={1}
                          defaultView={`${CalendarRepo()
                            .isCalendarModelMonth(model) === 'month' ? 'dayGridMonth' : 'timeGridWeek'}`}
                          header={{
                            left: 'prev,next today, custom',
                            center: 'title',
                            right: 'dayGridMonth,timeGridWeek',
                          }}
                          customButtons={{
                            custom: {
                              text: 'custom 1',
                              click() {
                                calendar.gotoDate();
                                alert('clicked custom button 1!');
                              },
                            },
                          }}
                          nowIndicator
                          displayEventEnd={{
                            month: false,
                            basicWeek: true,
                            default: false,
                          }}
                          businessHours
                          timeZone="Europe/Kiev"
                          selectable
                          rerenderDelay={10}
                          eventDurationEditable
                          editable
                          droppable
                          eventDrop={(info) => {
                            this.handleDragEvent(info.event.id, info.event.title, info.event.start, info.event.end, info.event.allDay);
                          }}
                          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin, momentTimezonePlugin]}
                          themeSystem="bootstrap"
                          events={model.events}
                          eventReceive={this.eventReceive}
                          eventClick={this.handleEventClick}
                          dateClick={this.handleDateClick}
                          eventLimit
                        />

Answer 1

查看我为您制作的此代码和框：
Codesandbox

这应该对您的项目有所帮助。
也许您应该考虑将事件添加到日历之外的按钮，例如在我的沙箱中。

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction"; // needed for dayClick

import "./styles.css";

// must manually import the stylesheets for each plugin
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

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

  state = {
    calendarWeekends: true,
    calendarEvents: [
      // initial event data
      { title: "Event Now", start: new Date() }
    ]
  };

  render() {
    return (
      <div className="demo-app">
        <div className="demo-app-top">
          <button onClick={this.toggleWeekends}>toggle weekends</button>&nbsp;
          <button onClick={this.gotoPast}>go to a date in the past</button>
          &nbsp; (also, click a date/time to add an event)
        </div>
        <div className="demo-app-calendar">
          <FullCalendar
           id="fullCalendar"
           firstDay={1}
            defaultView="dayGridMonth"
            header={{
              left: "prev,next today, custom",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
            }}
            customButtons={{
              custom: {
                text: 'custom 1',
                click() {
                  this.gotoPast();
                },
              },
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            ref={this.calendarComponentRef}
            weekends={this.state.calendarWeekends}
            events={this.state.calendarEvents}
            dateClick={this.handleDateClick}
          />
        </div>
      </div>
    );
  }

  toggleWeekends = () => {
    this.setState({
      // update a property
      calendarWeekends: !this.state.calendarWeekends
    });
  };

  gotoPast = () => {
    let calendarApi = this.calendarComponentRef.current.getApi();
    calendarApi.gotoDate("2019-10-12"); // call a method on the Calendar object
  };

  handleDateClick = arg => {
    if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
      this.setState({
        // add new event data
        calendarEvents: this.state.calendarEvents.concat({
          // creates a new array
          title: "New Event",
          start: arg.date,
          allDay: arg.allDay
        })
      });
    }
  };
}

无法转到“完整日历”上的特定日期

1 个答案: