Реагировать на полный календарь изменения API представления - PullRequest
0 голосов
/ 30 апреля 2020

Я работаю над полным приложением календаря в реакции. Моя цель - щелкнуть плитку дня в представлении «DayGridMonth» и переключить ее на тот день в представлении «DayGridDay».

Я использовал функцию dateClick для запуска события, но нет доступа к API ChangeView. Я также пытался создать ссылку в моем компоненте на фактический объект календаря, но там я тоже не могу его найти.

Спасибо

Фрагмент кода:

import React from 'react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import FullCalendar from '@fullcalendar/react';

//css calendar compoonents
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import './styles.css';

export default class Calendar extends React.Component {

  calendarRef = React.createRef();

  render() {
    return (
      <>
        <FullCalendar
          timeZone='UTC' //since SQL dates dont have timezones
          defaultView='dayGridMonth'
          header={{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,dayGridDay',
          }}

          dateClick={this.handleDateClick}
          plugins={[dayGridPlugin, interactionPlugin]}
          dayRender={this.assignLogoMonth}
          ref={this.calendarRef}
        />
      </>
    );
  }

  handleDateClick = dateClickInfo => {
  //would like this to take me to dayGridDay view of this day
    console.log(this.calendarRef.current.getApi());
  };    
  }
}

1 Ответ

1 голос
/ 04 мая 2020

Событие, хотя атрибут changeView отсутствует в возвращенном объекте createRef, но вы все равно можете получить доступ к функции. Я думаю, что просто неправильно понял, что на самом деле сделала функция реагирования createRef.

Следующий код заставит ваш календарь связываться с дневным представлением.

  handleDateClick = dateClickInfo => {
    this.calendarRef.current
        .getApi()
        .changeView('dayGridDay', dateClickInfo.date)
  };

Спасибо ADyson за помощь в этом!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...