React 完整日历更改视图 API

Question

我正在开发一个完整的日历应用程序。我的目标是单击“DayGridMonth”视图中的一天图块，并将其切换到“DayGridDay”视图中的那一天。

我已使用 dateClick 函数来触发该事件，但无法访问 ChangeView API。我还尝试在组件中创建对实际完整日历对象的引用，但我也无法在那里找到它。

谢谢

代码片段：

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());
  };    
  }
}

Answer 1

尽管changeView属性不在返回的createRef对象中，但您仍然可以访问该函数。我想我只是误解了 React createRef 函数的真正作用。

以下代码将使您的日历链接到日视图。

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

感谢 ADyson 帮助我解决了这个问题！