reactでカレンダー機能を実装する

fullcalendar

• reactでfullcalendarを利用してみたが、カレンダー上でイベントを追加できるようにするには４８０ドルを支払わないといけないので見送る。 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;

実行画面

次に試すのは下記のパッケージを試したところ

github.com

パッケージインストール

• インストールしましたが、うまく動かず断念しました。fullcalendarまたは自前で作るしかなさそうです。

‘‘‘ npm install jquense/react-big-calendar npm install moment