Ribbit's works
にメンテナンス済み

カレンダープラグイン

Googleカレンダーライクなデザインで、直観的にスケジュールを登録できるカレンダーを実装します。一覧は月・週・日表示に対応し、終日の予定なども登録可能です。

カレンダープラグイン

kintone で選択することのできる一覧は3種類あり、「表形式」、「カレンダー形式」、「カスタマイズ」の3つです。

「カレンダー形式」を選択することで、特定の日付フィールドと紐づけたカレンダーを表示することができます。

例を挙げれば、以下のような使い方が考えられます。

  • 予定表
  • スケジュール管理
  • 設備予約
  • 休暇申請
  • 納期管理

こういった用途にカレンダーは使用することができますが、Google カレンダーのような操作性はありません。

カレンダーから直接レコードを編集することはできませんし、カレンダーの表示も月表示のみです。

そこで、オープンソースライブラリであるfullcalendarを使用したカレンダープラグインを開発しました。

プラグインはオープンソースで Github に公開しており、無料で利用できます。

プラグインが提供する機能

Google カレンダーのような操作性

プラグインを導入することで、Google カレンダーのような操作性を実現できます。

ドラッグ&ドロップでイベントを移動することができる他、カレンダーから直接レコードの追加・編集・削除が可能です。

より直感的な操作が可能になるため、スケジュール管理や予定表の作成に最適です。

カレンダープラグインを導入した場合の一覧画面

レコードの追加・編集

プラグインでは、カレンダーから直接レコードの追加・編集が可能です。

登録済みのスケジュールをクリックすることで、対象のレコードをカレンダー上から直接編集できます。

また、登録したい日付をクリック、もしくはドラッグすることで、新規レコードの追加が可能です。

カレンダー上から直接レコードの追加・編集ができるため、作業効率を向上させることができます。

カレンダープラグインでレコードを追加する

表示切り替え

プラグインでは、週表示、日表示、月表示、3 日、5 日表示などの表示切り替えが可能です。

また、表示する時刻の設定(8 時~ 18 時までなどの設定)も行うことができます。

営業時間や作業時間などに合わせて表示をカスタマイズすることができるため、より使いやすいカレンダーを作成できます。

また、画面から表示切替を行うことができるため、使う方に合わせた表示を行うことができます。

カレンダープラグインの表示を一週間単位に設定
カレンダープラグインの表示をひと月単位に設定

カテゴリー別表示

プラグインでは、カテゴリー別にイベントを表示することができます。

カテゴリーにはラジオボタンフィールド、チェックボックスフィールド、ドロップダウンフィールドなどを指定することができます。

カテゴリーを設定することで、イベントを色分けして表示することができます。

また、カテゴリーごとに表示・非表示を切り替えることも可能です。

カレンダープラグインでカテゴリー別に表示する

プラグインの設定

プラグインの設定画面では、kintone 管理者ができる限り簡単に、直感的に設定を行うことができるように設計されています。

プラグインテンプレートも用意しているため、テストも容易に行うことができます。

カレンダープラグインで終日のイベントを設定

一覧の設定

プラグインでは、表示形式を「カスタマイズ」に設定した一覧を使用します。

設定画面から対象の一覧を選択することで、カレンダーに表示するレコードを指定することができます。

また、一覧を用意していない場合は、プラグイン設定画面から一覧を追加することも可能です。

カレンダープラグインで一覧の設定を行う

終日設定

プラグインでは、時刻を設定せずに終日のイベントを登録することができます。

終日のイベントは、カレンダー上で日付部分のみ表示され、時刻部分は表示されません。

終日のイベントを有効にするためには、チェックボックスフィールドを指定し、そのフィールドがどのような状態であれば終日のイベントとするかを設定します。

カレンダープラグインで終日のイベントを設定

カテゴリー設定

プラグインの一覧で前述しましたが、プラグインでは、カテゴリー別にイベントを表示することができます。

カテゴリーにはラジオボタンフィールド、チェックボックスフィールド、ドロップダウンフィールドなどを指定することができます。

イベントの色分け設定はカテゴリー設定とは別に用意されており、カテゴリーに使用するフィールドの項目の順番と、色の順番を合わせることで、イベントの色分けを行うことができます。

色分け設定がカテゴリーの項目数に満たない場合は、繰り返し色を使用します。

カレンダープラグインでカテゴリー設定を行う

プラグインが活きるシーン

  • より直感的なカレンダー表示を行いたい
  • カレンダーから直接レコードを編集したい
  • カレンダーの表示を単位ごとに切り替えたい
  • カレンダーを色分け表示したい