FullCalendarで簡単なカレンダーを作る - 学んだことをメモするブログ

はじめに

fullcalendarには色々とカレンダーの表示方法がある。一番シンプルなのものをメモしておく。

(1)一番シンプルな月単位カレンダーを作る

インストール

まずライブラリをインストール。

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

React Component - Docs | FullCalendar

コード

mport React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from "@fullcalendar/daygrid";

const Calendar = () => {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
    />
  );
}

export default Calendar;

plugins={[dayGridPlugin]}
このpluginを指定することで、月次カレンダーが表示されるようになる。
initialView="dayGridMonth" pluginsでdayGridPluginを指定した時の、初期表示ビューの設定。 dayGridMonthで月単位で表示する標準的なグリッドビューとなる。
他にも、
- dayGridWeek
- dayGridDay

結果

(2)時間単位のカレンダーを作る

fullcalendar.io

インストール

npm install @fullcalendar/timegrid

コード

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

const Calendar = () => {
  return (
    <FullCalendar
      plugins={[timeGridPlugin]}
      initialView="timeGridWeek"
    />
  );
}

export default Calendar;

結果

参考にしたサイト

pluginから理解するFullCalendar with React #UI - Qiita

React + TypeScript + FullCalendar: 簡単なカレンダーをつくる #JavaScript - Qiita