新カレンダー開発のきっかけとFullCalendarを採用した理由

2017/07/26 · · 投稿者 Takashi Okutsu

FullCalendar Logo前回のブログ記事では、新しくなったカレンダーの画面や機能をご紹介しました。この新カレンダーでは、FullCalendar という名前の jQuery ベースのライブラリを使用しています。機能が豊富でとても使いやすい（開発しやすい）素晴らしいライブラリです。

今回のブログ記事では、新しいカレンダーの開発のきっかけや、いくつかのカレンダー用ライブラリの中から FullCalendar を選んだ理由などについて説明します。

時間の分かる週間カレンダーが欲しい

新しいカレンダー開発に取り組み始めた理由は、スケジュール管理のために「何時から何時まで」が視覚的にわかる週間カレンダーが欲しかった、ということでした。

標準的な月間カレンダーでは、例えば、下図のように 4 件のイベントが登録されている場合、それぞれの開始時刻や開始順序はわかりますが、それぞれの終了時刻や空き時間があるかどうか（各イベントが重なっているかどうか）がわかりません。

月間カレンダー例

これに対して、下図のように縦軸に時刻が表示される週間カレンダーでは、各イベントの長さ（時間）、重なり、空き時間などをわかりやすく表現できます。

時刻付きの週間カレンダー

細かなスケジュール管理をするとなると、このような各イベントの長さ（時間）、重なり、空き時間を確認できる機能は必要ですよね。

独自開発 vs ライブラリ利用

当初、時刻付きの週間カレンダー画面を作るには、横方向に 7 列（7 日）、縦方向に 24 列（24 時間）のテーブルを組み、開始日時と終了日時を元に各イベントをテーブル上に配置すれば良いだろうと簡単に考えていました。

確かに「表示するだけ」なら比較的簡単に実現できるかもしれません。しかし、次のような「出来て当たり前」の機能を一から開発することは簡単ではありません。

  1. ドラッグ＆ドロップで日時を変更できるようにする。
  2. 複数のイベントが重なった場合にそれらを重ねるか、または幅を狭めて表示する。
  3. 将来的に 2 週間表示や 14 日表示を追加できるように拡張性を持たせておく。

そこで、JavaScript で作られたカレンダー用のライブラリをリサーチすることにしました。優れたライブラリには上記のような機能が予め用意されているので、TeamPage からはそれらの機能を呼び出せば良いだけです。機能そのものを開発する必要がなくなるので、開発にかかる時間やコストを圧縮できます。

リサーチの結果、次の 3 つが候補に挙がりました。

  1. fullCalendar
  2. Calendario
  3. Kendo UI Calendar
  4. jQuery Week Calendar

これらの中から主に次の理由で 1. の「FullCalendar」を選びました。

  • オープンソースかつ MIT ライセンスで公開されている。
  • 月間、週間、年など、いろいろな形式のカレンダー画面が用意されていて、しかも「7 日間」のような独自の画面を定義・追加できる。
  • TeamPage には元々 jQuery が組み込まれており、TeamPage 内で動作することを確認できた。
  • 本家サイトに詳しいマニュアルが整備されている。
  • 開発者向けの問答サイトである stackoverflow に FullCalendar に関する Q&A が山のようにあるので問題解決しやすい。

開発中にはいろいろな問題にぶち当たりましたが、根気強く stackoverflow を検索することで同じ問題や似たような問題や解決方法など、先人たちの知恵を見つけることができ、大いに助けられました。

カスタマイズ対応力

FullCalendar はとてもよく考えられて作られているライブラリです。開発を進めるにつれてその素晴らしさをより深く実感できるようになりました。

例えば、パラメーターを指定するだけである程度のカスタマイズを簡単にできるようになっています。

// カレンダー上部のボタンやタイトルなど
header: {
  left: 'month,basicWeek,listMonth',
  center: 'title',
  right: 'prev,next today'
},
// ボタンに表示される文字
buttonText: {
  today:    '今日',
  month: '月',
  basicWeek: '週',
  listMonth: '月リスト'
},
// ロケールは日本語
locale: 'ja',
// 週の始まりは日曜日
firstDay: 0,
// デフォルトの日にち（TeamPageのクッキーから読み取る）
defaultDate: fcDefaultDate('<config.view.value name="viewtype" />'),
// デフォルトのカレンダー（TeamPageのクッキーから読み取る）
defaultView: fcDefaultView('<config.view.value name="viewtype" />', '<#fullcalendar-default-viewname />'),
// たくさんイベントがある場合は「more」を表示
eventLimit: true,
eventLimitClick:'popover',
// 何時以降を「次の日」と認識するか
nextDayThreshold: '00:00:00'

カレンダー全体ではなく、イベント毎に細かな設定をしたい場合もありますよね。大丈夫です。多くのパラメーターは、カレンダー全体設定ではなく各イベントの JSON データでも設定できます。例えば、「イベントをドラッグ＆ドロップできるかどうか」を設定する「editable」パラメーターを、各イベントの編集権限を調べた結果を true か false の値として JSON データに入れられます。

{
  "id": "__entry.tractionid.fqid__",
  "tractionid": "__entry.tractionid__",
  "displayname": "<#entry-class-name>",
  "displaytype": "__entry.displaytype__",
  "customentrytype": "__entry.customentrytype__",
  "editable": <entry.permissions.edit>true<else>false</entry.permissions.edit>,
  "className": "<#calitem-class />",
  "title": "__entry.titletext__",
  "start": "__entry.startdate__",
  "end": "__entry.enddate__",
  "allDay": <#entry-task-or-not />
  "tpAllDay": <#entry-allday-or-not />
  "tpDue": "<#calitem-tp-due />"
}

さらに、JSON データに独自のパラメーターを追加できます。上記の例では「tractionid」「displayname」「customentrytype」などの TeamPage 独自のパラメーターを JSON データに入れ、FullCalendar での次のような条件分岐処理に使用しています。

  • イベントの種類がタスクだったらチェックボックスを、予定だったらアイコンを表示する。
  • ドラッグ＆ドロップされたとき、イベントの種類によってドラッグ＆ドロップをキャンセルする。
  • TeamPage のイベントの背景色は基本的に透明にして、Google Calendar のイベントは背景を指定色で塗りつぶす。

まとめ

FullCalendar は、「与えられたデータをカレンダーに表示する」「ドラッグ＆ドロップされたら移動する」などの基本的な機能しか備えていません。

TeamPage のような高機能なアプリケーションに組み込んで動作させる場合、例えば「移動したら日時を変更してデータベースに反映させる」のような、求められるさまざまな機能を追加する必要があります。

FullCalendar には、その多くを実現できる柔軟性が備わっています。この素晴らしいライブラリを開発・提供している FullCalendar LLC に感謝いたします。

新しくなった TeamPage カレンダーへの質問や機能追加要望などは、お気軽にサポートサイトのフォーラムへお寄せください。（ユーザー登録（無料）とログインが必要です）

関連記事

新 TeamPage カレンダー画面と機能の紹介 ... TeamPage バージョン 6.2 から利用できるようなった、新しいカレンダーの画面や機能について紹介します。

カレンダーやタスクリストを、色彩豊かに、より使いやすく ... 予定やタスクに色を付けられるようになりました。カレンダーやタスクリスト（タスクの一覧）がカラフルになることにより、仕事がより進めやすくなりました。

スケジュール集計プラグイン ... 予定記事（スケジュール記事）の開始日時と終了日時を元に作業工数（所要時間）を自動的に計算し、指定された期間内の集計を行います。さらに、集計した工数を、ユーザーごと、カテゴリーごと、プロジェクトごと、顧客ごと等に分類し、見やすい表やグラフで表示します。

ダッシュボードの2週間カレンダー プラグイン ... 各スペースのダッシュボード（ニュースページ）と「すべてのスペース」のダッシュボード（フロントページ）に２週間カレンダーを表示するプラグインです。スペースのダッシュボードでそのスペースの直近スケジュールを確認できるようになります。

チームメンバーのスケジュール共有＆調整プラグイン ... 今回刷新された新しいカレンダーに統合された、旧カレンダー用の、複数ユーザーのカレンダーを並べて表示するプラグインです。

カレンダーの週の始まりを月曜日に変更プラグイン ... TeamPage のカレンダーの週は、日本語ロケールでは、標準で日曜日から始まります。このプラグインを利用すると、ユーザーごとに、週の始まりを月曜日に変更できるようになります。

プロフィールページ便利化プラグイン ... ユーザーのプロフィール ページのダッシュボードに、通知リスト、2週間カレンダー、そして担当するタスクとプロジェクトのリストを表示し、「マイページ」として使いやすくします。

Page Top