ReactでFullCalendar(JSのライブラリ)を使ってみる

この記事の概要

ReactでJSライブラリのFullCalendarを使ってみた備忘録を記載する。

Reactの環境構築

ReactにFullCalendarのインストール

// FullCalendarのインストール
npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/core @fullcalendar/interaction

FullCalendarの使い方

カレンダーの表示

App.js

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

function App() {
  return (
    <>
      <FullCalendar plugins={[dayGridPlugin]} initialView='dayGridMonth' />
    </>
  );
}

export default App;

↓FullCalendarのドキュメント↓

カレンダーの日本語化

App.js

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import allLocales from '@fullcalendar/core/locales-all'; ☆☆☆追加

function App() {
  return (
    <>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        locales={allLocales} ☆☆☆追加
        locale='ja' ☆☆☆追加
       />
    </>
  );
}

export default App;

予定の表示追加

App.js

const thisMonth = () => { ☆☆☆追加
  const today = new Date();
  return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}`;
}

function App() {
  return (
    <>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        locales={allLocales}
        locale='ja'
        events={[ ☆☆☆追加
          {title: 'event 1', date: `${thisMonth()}-01`},
          {title: 'event 2', date: `${thisMonth()}-02`},
          {title: "event 3", start: `${thisMonth()}-03`, end: `${thisMonth()}-05` },
          {
            title: "event 4",
            start: `${thisMonth()}-07T10:00:00`,
            end: `${thisMonth()}-07T13:00:00`,
          },
        ]}
       />
    </>
  );
}

export default App;

クリックした日付のデータ表示

App.js

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import allLocales from '@fullcalendar/core/locales-all';
import interactionPlugin from '@fullcalendar/interaction'; ☆☆☆追加
import { useCallback } from 'react'; ☆☆☆追加

const thisMonth = () => {
  const today = new Date();
  return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}`;
}

function App() {
  const handleDateClick = useCallback((arg) => { ☆☆☆追加
    alert(arg.dateStr)
  }, [])

  return (
    <>
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin]}
        initialView='dayGridMonth'
        locales={allLocales}
        locale='ja'
        events={[
          {title: 'event 1', date: `${thisMonth()}-01`},
          {title: 'event 2', date: `${thisMonth()}-02`},
          {title: "event 3", start: `${thisMonth()}-03`, end: `${thisMonth()}-05` },
          {
            title: "event 4",
            start: `${thisMonth()}-07T10:00:00`,
            end: `${thisMonth()}-07T13:00:00`,
          },
        ]}
        dateClick={handleDateClick} ☆☆☆追加
       />
    </>
  );
}

export default App;

クリックしたイベントのデータ表示

App.js

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import allLocales from '@fullcalendar/core/locales-all';
import interactionPlugin from '@fullcalendar/interaction';
import { useCallback } from 'react';

const thisMonth = () => {
  const today = new Date();
  return `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}`;
}

function App() {
  const handleDateClick = useCallback((arg) => {
    alert(arg.dateStr)
  }, [])

  const handleEventClick = useCallback((arg)=> { ☆☆☆追加
    console.log(arg.event)
    alert(arg.event.startStr + '~' +  arg.event.endStr)
  })

  return (
    <>
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin]}
        initialView='dayGridMonth'
        locales={allLocales}
        locale='ja'
        events={[
          {title: 'event 1', date: `${thisMonth()}-01`},
          {title: 'event 2', date: `${thisMonth()}-02`},
          {title: "event 3", start: `${thisMonth()}-03`, end: `${thisMonth()}-05` },
          {
            title: "event 4",
            start: `${thisMonth()}-07T10:00:00`,
            end: `${thisMonth()}-07T13:00:00`,
          },
        ]}
        dateClick={handleDateClick}
        eventClick={handleEventClick} ☆☆☆追加
       />
    </>
  );
}

export default App;