ReactとFullCalendarで外部からのドラッグ＆ドロップを実現する方法

2023.8.21（更新日：2023.8.21）

ReactとFullCalendarの組み合わせによって、高度なカレンダー機能を持ったアプリケーションを構築することが可能です。この記事では、特にカレンダー外部のエレメントをドラッグして、カレンダー内にドロップする方法を解説します。

Contents

1 はじめに
2 必要なツールとライブラリ
- 2.1 ライブラリのインストール
3 コンポーネントの作成
4 コンポーネントの解説
5 まとめ

はじめに

FullCalendarはJavaScriptで書かれた高機能なカレンダーライブラリです。Reactとの連携もサポートされており、これによりReactのステートやプロップスとFullCalendarの機能をシームレスに連携させることができます。

必要なツールとライブラリ

ライブラリのインストール

まず、Reactがインストールされていることを前提に、必要なライブラリをインストールします。

npm install @fullcalendar/react @fullcalendar/daygrid @fullcalendar/interaction

@fullcalendar/react : Reactとの統合をサポートするパッケージ
@fullcalendar/daygrid : 月表示のビューを提供するパッケージ
@fullcalendar/interaction : ドラッグ＆ドロップやイベントの編集をサポートするパッケージ

コンポーネントの作成

Reactのコンポーネントを以下のように作成します。

import React, { useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';

function CalendarApp() {
    useEffect(() => {
        initializeDraggable();
    }, []);

    const initializeDraggable = () => {
        let draggableEls = document.querySelectorAll('.draggable');
        draggableEls.forEach(el => {
            new Draggable(el, {
                eventData: {
                    title: '作成されるイベントのタイトル'
                }
            });
        });
    };

    return (
        <div className="container">
            <div className="draggable">
                <p>ドラッグする要素</p>
            </div>
            <FullCalendar 
                plugins={[dayGridPlugin, interactionPlugin]}
                initialView="dayGridMonth"
                droppable={true}
                events={[]}
                editable={true}
            />
        </div>
    );
}

export default CalendarApp;

コンポーネントの解説

useEffectフック:
- コンポーネントのマウント時にinitializeDraggable関数を実行します。
initializeDraggable関数:
- .draggableクラスを持つすべての要素をドラッグ可能にします。
- new Draggable(el, {...}): 選択された要素に対して、Draggableクラスのインスタンスを作成します。これにより、要素がドラッグ可能となります。eventDataプロパティによって、ドロップ時にカレンダー上に表示されるイベントのデータを設定します。
FullCalendarのプロパティ:
- plugins: FullCalendarに統合するためのプラグインの配列です。この例では、dayGridPluginとinteractionPluginを使用しています。
- initialView: FullCalendarが最初に表示するビューのタイプを設定します。この例では月表示（dayGridMonth）が指定されています。
- droppable: このプロパティをtrueに設定することで、ユーザーが外部要素をカレンダーにドロップできるようになります。
- events: カレンダーに初期で表示するイベントの配列です。この例では空の配列が指定されており、初期の段階でイベントは表示されません。
- editable: このプロパティをtrueに設定することで、カレンダー上のイベントをドラッグして移動したり、リサイズすることができます。

まとめ

ReactとFullCalendarを駆使することで、外部のアイテムをカレンダーにドラッグ＆ドロップする機能を簡単に実装することができます。実際に自分で実装してみると色々と躓くことろがあったため、今回の記事にまとめてみました。

BLOG