Блог

Я получаю заголовок ошибки, используя 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 для воспроизведения ошибки: ссылка

Добавить contentHeight: 'auto' в настройки конфигурации календаря. Это происходит, когда календарь отображается на меньших размерах, таких как мобильные устройства

Как упоминал Иван Россоу, вам необходимо изменить contentHeight на auto в настроенной конфигурации FullCalendar. Вот пример с реквизитами:

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

}