【FullCalendar】プレミアム機能

はじめに
1. Quipha
Fullcalendarの導入と実装
プレミアム機能について
タイムラインビュー
垂直リソースビュー
印刷の最適化
さいごに

はじめに

今回はFullCalendarのプレミアム機能を評価してみました。

FullCalendar Schedulerとも呼ばれています。

使用するバージョン

Windows 11 or macOS Monterey (M1)
FullCalendar 6.1.4

他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。

Quipha

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

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

Fullcalendarの導入と実装

Fullcalendarの導入と実装については、以下の記事にまとめていますので、そちらをご覧ください。

また、LaravelやDjangoとFullCalendarでDBに保存・表示できる実装をした記事も参考にしてください。

プレミアム機能について

プレミアム機能については、公式ドキュメントをご覧ください。
本記事では評価目的で試してみます。

Premium Plugins - Docs | FullCalendar

FullCalendar Premium (also known as “FullCalendar Scheduler”) is a collection of plugins released under a different lice...

評価バージョンは、クリエイティブコモンズライセンスの下でライセンスされており、ソースコードの変更を配布したり、商用のWebサイトや製品で使用したりすることはできません。

プレミアム機能については、ライセンスが必要になります。
プレミアムのプラグインを使用すると、カレンダーの左下に以下のメッセージが表示されました。

Your license key is invalid. More Infor

今回は評価目的ですので、警告は表示されたままでも構いませんが、ライセンス警告を非表示にするには、以下のライセンスキーを使ってくださいとのことでした。

var calendar = new Calendar(calendarEl, {
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
});

タイムラインビュー

以下のコマンドでタイムラインビュー(Timeline View)をインストールします。

npm install --save @fullcalendar/core @fullcalendar/resource-timeline

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

{
...
    "dependencies": {
        "@fullcalendar/core": "^6.1.4",
        "@fullcalendar/daygrid": "^6.1.4",
        "@fullcalendar/interaction": "^6.1.4",
        "@fullcalendar/list": "^6.1.4",
        "@fullcalendar/resource-timeline": "^6.1.4",
        "@fullcalendar/timegrid": "^6.1.4",
    }
}

calendar.jsにタイムラインビュープラグインを追加しました。
例として、人ごとのスケジュールを見れるようにしてみました。

resources\js\calendar.js

import { Calendar } from "@fullcalendar/core";
import interactionPlugin from "@fullcalendar/interaction";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

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

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

    // ドラッグで移動が可能
    editable: true,
    // ヘッダのタイトルを変更
    resourceAreaHeaderContent: "予定一覧",
    // 左側のリソースの一覧
    resources: [
        { id: "a", title: "田中" },
        { id: "b", title: "鈴木", eventColor: "green" },
    ],
    // リソースごとのイベントを定義
    events: [
        {
            resourceId: "a",
            title: "打ち合わせ",
            start: "2021-11-21T14:00:00",
            end: "2021-11-21T16:00:00",
        },
        {
            resourceId: "b",
            title: "外出",
            start: "2021-11-21T10:00:00",
            end: "2021-11-21T15:00:00",
        },
    ],
});
calendar.render();

以下のように人ごとのスケジュールが表示できました。

イベントはドラッグで移動が可能です。
また右上に配置したボタンで、週単位、月単位の表示が可能です。

タイムラインビューについて、詳しくは以下をご覧ください。

Timeline View - Docs | FullCalendar

FullCalendar Premium provides a view called “timeline view” with a customizable horizontal time-axis and resources as ro...

垂直リソースビュー

垂直に表示できる垂直リソースビュー(Vertical Resource View)を試してみました。

以下のコマンドで垂直リソースビューをインストールします。

npm install --save @fullcalendar/core @fullcalendar/resource-timegrid

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

{
...
    "dependencies": {
        "@fullcalendar/core": "^6.1.4",
        "@fullcalendar/daygrid": "^6.1.4",
        "@fullcalendar/interaction": "^6.1.4",
        "@fullcalendar/list": "^6.1.4",
        "@fullcalendar/resource-timegrid": "^6.1.4",
        "@fullcalendar/resource-timeline": "^6.1.4",
        "@fullcalendar/timegrid": "^6.1.4",
    }
}

先程同様、例として人ごとのスケジュールを見れるようにしてみました。

import { Calendar } from "@fullcalendar/core";
import interactionPlugin from "@fullcalendar/interaction";
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';

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

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

    // ドラッグで移動が可能
    editable: true,
    // ヘッダのタイトルを変更
    resourceAreaHeaderContent: "予定一覧",
    // 左側のリソースの一覧
    resources: [
        { id: "a", title: "田中" },
        { id: "b", title: "鈴木", eventColor: "green" },
    ],
    // リソースごとのイベントを定義
    events: [
        {
            resourceId: "a",
            title: "打ち合わせ",
            start: "2021-11-21T14:00:00",
            end: "2021-11-21T16:00:00",
        },
        {
            resourceId: "b",
            title: "外出",
            start: "2021-11-21T10:00:00",
            end: "2021-11-21T15:00:00",
        },
    ],
});
calendar.render();

垂直にスケジュールが表示されました。

垂直リソースビューについて、詳しくは以下をご覧ください。

Vertical Resource View - Docs | FullCalendar

FullCalendar Premium provides TimeGrid view and DayGrid view with the ability to display resources as columns. For examp...

印刷の最適化

印刷の最適化ができるプラグイン(Optimizing for Print)を試してみました。

まずはこのプラグインを導入する前に、タイムラインビューを印刷してみました。
ブラウザ上ではリソースやイベントが表示されていましたが、印刷の方には表示されませんでした。

以下のコマンドでインストールします。

npm install --save @fullcalendar/adaptive

ソースに、adaptivePluginを追加しました。

import { Calendar } from "@fullcalendar/core";
import interactionPlugin from "@fullcalendar/interaction";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
import adaptivePlugin from "@fullcalendar/adaptive";

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

let calendar = new Calendar(calendarEl, {
    plugins: [interactionPlugin, resourceTimelinePlugin, adaptivePlugin],
    initialView: "resourceTimelineDay",
    headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth",
    },
    locale: "ja",

    // ドラッグで移動が可能
    editable: true,
    // ヘッダのタイトルを変更
    resourceAreaHeaderContent: "予定一覧",
    // 左側のリソースの一覧
    resources: [
        { id: "a", title: "田中" },
        { id: "b", title: "鈴木", eventColor: "green" },
    ],
    // リソースごとのイベントを定義
    events: [
        {
            resourceId: "a",
            title: "打ち合わせ",
            start: "2021-11-21T14:00:00",
            end: "2021-11-21T16:00:00",
        },
        {
            resourceId: "b",
            title: "外出",
            start: "2021-11-21T10:00:00",
            end: "2021-11-21T15:00:00",
        },
    ],
});
calendar.render();

画面の表示は、全く違いありませんでした。

印刷を行ってみましょう。今度は正しくスケジュールが表示されました。（以下は印刷したもの）

印刷の最適化について、詳しくは以下をご覧ください。

Optimizing for Print - Docs | FullCalendar

FullCalendar looks great on a computer screen, but by default it does not look very good for printing on a piece of pape...

さいごに

FullCalendarは導入もカスタマイズも楽で便利です。
今回はプレミアム機能を試してみましたが、導入が必要な場合は検討してみてはいかがでしょうか。

他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。

コメントをどうぞコメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

投稿ルール

コメントは承認制となっており、管理人の判断で公開されます。
承認にはお時間をいただきます。(平日の日中は対応できません)
コメントを公開する際、内容を修正する場合があります。
ご質問の場合は、詳細な状況と内容を記載し、丁寧なコメントをお願い致します。
エラーメッセージだけではなく、各種バージョン、経緯、再現手順を記載ください。
記事とは無関係な内容やアバウトなど、その他の理由で承認されない場合があります。
必ずしも管理人が返信するわけではございませんのでご了承ください。

コメント ※

名前 ※

メール ※

サイト

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）