[FullCalendar]プラグイン間の移動が実装できない

Question

前提・実現したいこと

fullCalendarライブラリを使ってカレンダーアプリを実装しています。
その際に月カレンダーから日別カレンダーに遷移しようと考えているのですが、jsでやっているところをReactでやった場合どうなるのかわからず困っています。
https://fullcalendar.io/docs/Calendar-changeViewではcalendarオブジェクトを使えば遷移できると書かれているのですが、https://fullcalendar.io/docs/month-viewのようにjsではcalendarオブジェクトを作っているのでそのまま使えると思うのですが、https://fullcalendar.io/docs/reactのようにReactの場合はFullCalendarコンポーネントを使っているためどのようにcalendarオブジェクトを利用すればいいのかわかりません。
ご教示お願いします。

該当のソースコード

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

export default class DemoApp extends React.Component {
  render() {
    return (
      <FullCalendar
        plugins={[ dayGridPlugin ]}
        initialView="dayGridMonth"
      />
    )
  }
}

↓やりたいこと

calendar.changeView('timeGridDay', '2017-06-01');

Answer 1

こんにちは

参考になるか分かりませんが、同様の内容を質問している投稿をみつけました。（現時点で、まだ四ヶ月前の投稿なので、それほど古いものではありません。）

• stackoverflow: react-full-calendar-change-view-api

上記の投稿への回答を参考に作成してみたものが以下です。

import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";

export default class DemoApp extends React.Component {
  constructor() {
    super();
    this.calendarRef = React.createRef();
  }

  handleChangeView = () => {
    const api = this.calendarRef.current.getApi();
    const type =
      api.view.type === "dayGridMonth" ? "timeGridDay" : "dayGridMonth";
    const date = type === "timeGridDay" ? "2017-06-01" : null;
    api.changeView(type, date);
  };

  render() {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin]}
          initialView="dayGridMonth"
          ref={this.calendarRef}
        />
        <br />
        <button
          type="button"
          onClick={this.handleChangeView}
          style={{ width: 200 }}
        >
          <h3>ビューの切り替え</h3>
        </button>
      </div>
    );
  }
}

• 動作確認用サンプル： https://codesandbox.io/s/q291363-s2inn

参考になれば幸いです。