fullcalendar
- reactでfullcalendarを利用してみたが、カレンダー上でイベントを追加できるようにするには480ドルを支払わないといけないので見送る。 fullcalendar.io
パッケージインストール
npm install --save @fullcalendar/react @fullcalendar/daygrid
サンプルコード
import { useEffect, useCallback } from "react"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import '../App.css'; const Calendar = () => { return ( <div className="container mx-auto"> <FullCalendar plugins={[dayGridPlugin]} initialView="dayGridMonth" weekends={true} eventClick={ function (arg) { alert(arg.event.title) alert(arg.event.start) } } events={[ { title: 'event 1', date: '2021-08-01', backgroundColor: "red" }, { title: 'event 2', date: '2021-08-06', backgroundColor: "green" } ]} locale="ja" /> </div> ) } export default Calendar;
実行画面
次に試すのは下記のパッケージを試したところ
パッケージインストール
- インストールしましたが、うまく動かず断念しました。fullcalendarまたは自前で作るしかなさそうです。
‘‘‘ npm install jquense/react-big-calendar npm install moment