React 全日历更改视图 API

Question

我正在用 React 开发一个完整的日历应用程序。我的目标是单击 '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 函数的真正作用。

以下代码将使您的日历link进入日视图。

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

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

React 全日历更改视图 API

React Full calendar Change View API

fullcalendar

node.js

reactjs