React fullcalendar 错误无法读取未定义的属性 'seg'

Question

我仅在移动视图上使用 React fullcalendar 时收到标题错误。当我在桌面视图中时，一切正常。代码如下：

function CalendarPage() {
  const [currentEvents, setCurrentEvents] = useState(INITIAL_EVENTS);
  console.log(currentEvents);

  const handleDateSelect = (selectInfo) => {
    let title = prompt('Please enter a new title for your event');
    let calendarApi = selectInfo.view.calendar;

    calendarApi.unselect(); // clear date selection

    if (title) {
      calendarApi.addEvent({
        id: createEventId(),
        title,
        start: selectInfo.startStr,
        end: selectInfo.endStr,
        allDay: selectInfo.allDay
      });
    }
  };

  const handleEventClick = (clickInfo) => {
    clickInfo.event.remove();
  };

  const handleEvents = (events) => {
    setCurrentEvents({
      currentEvents: events
    });
  };

  function renderEventContent(eventInfo) {
    return (
      <>
        <b>{eventInfo.timeText}</b>
        <i>{eventInfo.event.title}</i>
      </>
    );
  }

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      headerToolbar={{
        left: 'prev,next,today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      initialView='dayGridMonth'
      locale={el}
      editable={true}
      selectable={true}
      selectMirror={true}
      dayMaxEvents={true}
      weekends={true}
      initialEvents={currentEvents}
      select={handleDateSelect}
      eventContent={renderEventContent}
      eventClick={handleEventClick}
      eventsSet={handleEvents}
    />
  );
}

我已阅读文档和 GitHub 页面，但不幸的是没有找到解决方案。

我已经创建了一个 codesandbox 来重现错误：link

Answer 1

将 contentHeight: 'auto' 添加到日历的配置设置中。当日历在较小尺寸（如移动设备）上呈现时会发生这种情况

Answer 2

正如 Ivan Rossouw 提到的，您需要在 FullCalendar 配置设置中将 contentHeight 更改为 auto。这是一个道具的例子：

  render() {
return (
  <div className='demo-app'>
    {this.renderSidebar()}
    <div className='demo-app-main'>
      <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        headerToolbar={{
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }}
        initialView='dayGridMonth'
        contentHeight='auto'
        editable={true}
        selectable={true}
        selectMirror={true}
        dayMaxEvents={true}
        weekends={this.state.weekendsVisible}
        events={this.state.currentEvents}
        select={this.handleDateSelect}
        eventContent={renderEventContent} // custom render function
        eventClick={this.handleEventClick}
        // eventsSet={this.handleEvents} // called after events are initialized/added/changed/removed
        /* you can update a remote database when these fire:
        eventAdd={function(){}}
        eventChange={function(){}}
        eventRemove={function(){}}
        */
      />
    </div>
  </div>
)

}

React fullcalendar 错误无法读取未定义的属性 'seg'

React fullcalendar error cannot read property 'seg' of undefined

fullcalendar

reactjs

React fullcalendar 错误无法读取未定义的 属性 'seg'

React fullcalendar error cannot read property 'seg' of undefined

fullcalendar

reactjs

React fullcalendar 错误无法读取未定义的属性 'seg'