无法前往完整日历上的特定日期

Posted 2023-02-22

【中文标题】无法前往完整日历上的特定日期

【英文标题】：Can't go to a specific date on Full Calendar

【发布时间】：2019-12-31 14:39:35

【问题描述】：

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

有错误

'未捕获的类型错误：无法读取属性'onViewDateChange' of null'

//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
                        />

【问题讨论】：

听起来像是primereact 包中的错误，或者您的this.state.startDate 可能为空

@Jbadminton 它不是空的。这是 var 日历行之前的 console.log Tue Aug 27 2019 15:48:28。错误链接之一导致我的代码带有另一行代码 var calendarEl = document.getElementById('fullCalendar');控制台.log(this.state.startDate); var calendar = new primereact_calendar__WEBPACK_IMPORTED_MODULE_20__["Calendar"](calendarEl); calendar.gotoDate(this.state.startDate);

@Jbadminton fullcalendar.io/docs/Calendar-gotoDate 这里是文档链接。我以不同的格式发送日期，但错误仍然相同。

我认为是因为在日历尚未呈现时触发了事件，您能否也分享更多代码

你可以试试：componentDidMount: function() var calendarEl = document.getElementById('fullCalendar'); var calendar = new Calendar(calendarEl); calendar.gotoDate(this.state.startDate); ,

【参考方案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
        )
      );
    
  ;

【讨论】：

太好了，你是怎么做到的？

我将您的函数 gotoPast 添加到我的 handleChange 方法中，还将 calendarComponentRef 添加到我的类中并写入属性 ref 在完整日历中。