自分だけのクイズ作成 - Quipha公開中

【FullCalendar】導入とスケジュールの登録【実装】

JavaScript
スポンサーリンク

はじめに

今回はFullCalendarを使って、Webアプリケーションにカレンダー機能を実装してみました。

カレンダー機能が簡単に導入でき、便利な機能が沢山ありますので、スケジュール機能の実装などに役立つと思います。

解説自体は、実践を想定してLaravelのプロジェクトで行いますが、必須ではありません。
FullCalendarはNPMでのインストール、Laravel Mix(webpack)でビルドを行いました。

実装や機能は参考になると思います。

Laravelの構築方法は以下をご覧ください。

使用するバージョン
  • Laravel Framework 8.69.0
  • FullCalendar 5.10.1

Quipha

個人開発ですがQuiphaというサービスを開発しました。
Webアプリケーションであり、LaravelとVue3(Composition APIも使用)で作成しました。
カレンダーの表示には、FullCalendarを利用しています。

良かったら、会員登録して動作を試してみて下さい。

Fullcalendarとは

FullCalendarは、基本的に無料で利用することができます。
無料の機能はMITライセンスですので、個人でも商用でも使いやすいですね。

ちなみに一部はプレミアム機能であり有料です。

Pricing | FullCalendar

以前のバージョンのFullCalendarはjQueryに依存していましたが、新しいバージョンでは必要ありません。FullCalendarのみで動作します。

スポンサーリンク

FullCalendarのインストール

今回はLaravelプロジェクトで、FullCalendarを使ってみました
もちろんLaravel以外でも利用することができます。

Laravelのプロジェクトは別途用意してください。
プロジェクト直下で、npmコマンドを利用して、FullCalendarをインストールします。

npm install @fullcalendar/core @fullcalendar/daygrid

まずは、1ヶ月分のカレンダー表示を行うプラグインをインストールします。

FullCalendarはコアと、別途プラグインを組み合わせて表示を行うことができます。
プラグインは以下に一覧があります。Premiumと書いてあるものが有料です。

Plugin Index - Docs | FullCalendar
FullCalendar offers the following packages:

package.jsonに以下の定義が追加されました。

{
...
    "dependencies": {
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1"
    }
}

FullCalendarの表示

Laravelで画面を一つ追加しましょう。web.phpを修正しました。

routes\web.php
Route::get('/calendar', function () {
    return view('calendar');
});

ビューファイルを作成し、jsの読み込みと、カレンダーを表示するためのタグを追加しました。

resources\views\calendar.blade.php
<html>
<body>
<div>
  <canvas id="myChart"></canvas>
</div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

カレンダーの処理を記述するJavaScriptファイルを用意しました。

FullCalendarのコアとプラグインをインポートし、カレンダーを表示するための最低限のコードを実装しました。

resources\js\calendar.js
import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";

var calendarEl = document.getElementById("calendar");

let calendar = new Calendar(calendarEl, {
    plugins: [dayGridPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "",
    },
});
calendar.render();

app.jsを修正します。一行だけ追加しました。(calendar.jsの読み込み)

resources\js\app.js
require("./calendar");

jsファイルをビルドします。開発時ですのでdevを指定しました。

npm run dev
(または、npm run watch)

Laravelプロジェクトの開発サーバーを起動し、以下のURLにアクセスします。

http://localhost:8000/calendar

カレンダーを表示することが出来ました。とても簡単ですね!

左上の左右ボタンで、月を変更できます。

スケジュールの登録機能の実装

interactionプラグインの導入

カレンダーをクリック、または日付の範囲をドラッグしスケジュールを登録できるようにしてみましょう。
@fullcalendar/interactionをインストールします。

npm install @fullcalendar/interaction

package.jsonに追加されました。

{
...
    "dependencies": {
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1"
        "@fullcalendar/interaction": "^5.10.1",
    }
}

calendar.jsを以下のように修正します。
カレンダー上で日付を選択したイベントを追加しました。

import { Calendar } from "@fullcalendar/core";
import interactionPlugin from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";

var calendarEl = document.getElementById("calendar");

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, dayGridPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "",
    },

    // 日付をクリック、または範囲を選択したイベント
    selectable: true,
    select: function (info) {
        alert("selected " + info.startStr + " to " + info.endStr);
    },
});
calendar.render();

ドラッグで日付の範囲を指定すると、アラートが上がることが確認できます。

カレンダーにイベントを登録

イベントが発生することを確認しました。それではイベントを追加する処理を実装してみましょう。
修正箇所だけ抜粋したコードです。

    // 日付をクリック、または範囲を選択したイベント
    selectable: true,
    select: function (info) {
        //alert("selected " + info.startStr + " to " + info.endStr);

        // 入力ダイアログ
        const eventName = prompt("イベントを入力してください");
        
        if (eventName) {
            // イベントの追加
            calendar.addEvent({
                title: eventName,
                start: info.start,
                end: info.end,
                allDay: true,
            });
        }
    },

日付をドラッグし範囲を選択します。
スケジュールを入力するプロンプトが表示されますので、任意でイベント名を入力します。

イベントの追加ができました。

ここまでの手順で、カレンダーにイベントを登録することが出来ました。
ただし、ブラウザの再描画を行うとイベントはクリアされてしまいます。

別記事でLaravelを使用して、さらにデータベースに保存する処理の実装を行いました。
詳しくは、以下をご覧ください。

スポンサーリンク

さらにカスタマイズ

日本語表示

JavaScriptのコードで、カレンダー生成時にlocaleにjaを指定します。

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, dayGridPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "",
    },
    locale: "ja",

カレンダーが日本語の表示になりました。

タイムグリッドとリスト表示

一ヶ月分のカレンダー表示を実装しましたが、他の表示もプラグインとしてインストールできます。
以下のコマンドを実行します。

npm install @fullcalendar/timegrid @fullcalendar/list

package.jsonに以下が追加されました。

{
...
    "dependencies": {
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",
        "@fullcalendar/list": "^5.10.1",
        "@fullcalendar/timegrid": "^5.10.1",
    }
}

calendar.jsを以下のように修正しました。

import { Calendar } from "@fullcalendar/core";
import interactionPlugin from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";

var calendarEl = document.getElementById("calendar");

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
    initialView: "dayGridMonth",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,listWeek",
    },
    locale: "ja",

    // 日付をクリック、または範囲を選択したイベント
    selectable: true,
    select: function (info) {
        //alert("selected " + info.startStr + " to " + info.endStr);

        // 入力ダイアログ
        const eventName = prompt("イベントを入力してください");

        if (eventName) {
            // イベントの追加
            calendar.addEvent({
                title: eventName,
                start: info.start,
                end: info.end,
                allDay: true,
            });
        }
    },
});
calendar.render();

画面の右上に、表示切り替え用のボタンを配置しました。

一週間分のビューです。

一日分のリストビューです。

さいごに

FullCalendarを使って、Webアプリケーションにカレンダー機能を実装してみました。

カレンダー機能が必要な場合は、導入を検討してみましょう。

コメント

タイトルとURLをコピーしました