kintone イベントカレンダープラグイン

フォローする

(著者:Cstap 武井 琢治)

概要

kintoneの一覧画面で、FullCalendarライブラリを使用したイベントカレンダーを閲覧・作成できるプラグインです。

kintoneの標準カレンダービュー(2016年5月8日アップデート時点)では不可能な以下の機能が実現できます。

  • 月次カレンダー/週次カレンダー/日次カレンダーを適宜切り替えることができます。
  • カレンダー上でイベント日時の変更が可能です。
  • イベントの開始から終了までの期間がカレンダー上からも分かります。
  • プロセス管理と連携し、イベントの進捗状況を視覚的に把握できます。

完成形

レコード一覧画面(レコード登録後)

このプラグインを利用したアプリのカレンダービューのイメージです。

 

設定画面(設定例)

 

プラグインを利用する

STEP1:フォームを設定する

アプリのフォームを設定します。

  • カレンダーにイベントを表示するためのフィールドを作成ください。
    最低限、以下の3フィールドが必要です。

    • 文字列(1行) ・・・ イベントタイトルとして使用します。
    • 日時 ・・・イベントの開始日時として使用します。
    • 日時 ・・・イベントの終了日時として使用します。

STEP2:アプリにプラグインを追加する

アプリにイベントカレンダープラグインを追加します。
プラグインの追加方法は、kintone ヘルプを参照してください。

プラグインを追加する

STEP3:プロセス管理を設定する(任意)

任意でプロセス管理との連携も可能です。

プロセス管理と連携することで、
イベントの進捗状況によって、背景色を変更することが可能になります。

プロセス管理の設定方法は、kintone ヘルプを参照してください。

プロセス管理を設定する

STEP4:プラグインを設定する

1.アプリ管理画面の「詳細設定」>「プラグイン」を開き
  イベントカレンダープラグインの歯車マークをクリックします。

2.各項目を設定します。

項目名 説明
イベント名フィールド イベント名の対象となるフィールド名を選択します。(必須)
文字列(1行)フィールドのみ選択可能です。
開始日時フィールド イベント開始日時の対象となるフィールド名を選択します。(必須)
日時フィールドのみ選択可能です。
終了日時フィールド イベント終了日時の対象となるフィールド名を選択します。(必須)
日時フィールドのみ選択可能です。
ステータス プロセス管理で設定した「ステータス」と、そのステータスに対するイベント背景色入力します。(最大5つまで/任意)
背景色は英語/16進数/RGBの各指定方法に対応しています。

例:
 ステータス「未処理」 背景色「blue」
 ステータス「処理中」 背景色「#ff0000」
 ステータス「完了」  背景色「rgb(0,128,0)」

3.[保存]をクリックします。

4.[アプリの設定]画面で[設定完了]をクリックすると、プラグインの設定がアプリに反映されます。

STEP5:プラグインを利用する

カレンダーにイベントを表示するために、レコードを登録します。

※「タイトル」「開始日時」「終了日時」が入力されていない場合は、保存時にエラーが出力されます。
※「開始日時」を「終了時間」と同じまたはそれより未来に設定することはできません。

レコード登録後、「スケジュール」一覧画面を表示すると、
登録したイベントが当該日時に表示されます。

月次カレンダー/週次カレンダー/日次カレンダーを右上のボタンから切り替えることが可能です。

各カレンダーでは、表示されたイベントをクリックすると、当該のイベントの詳細画面に移動します。
また、イベントをドラッグ&ドロップすることで、イベントの日時を移動することができます。

週次カレンダー/日次カレンダーでは、イベントの日時を伸縮することも可能です。
(週次カレンダーでは1時間ごと、日次カレンダーでは30分ごとに伸縮できます)

一覧画面で絞り込みを行うことで、
任意のイベントのみを表示することができます。

また、[アプリの設定を変更] > [設定済みの一覧] > [スケジュール]から絞り込みの条件を設定しておくことで、
カレンダー表示時、デフォルトでイベント表示の絞り込みを行うことが可能です。

サンプルプラグイン

plugin-sdkにアクセスしてフォルダごとダウンロードしてください。
そのフォルダ内の「examples/eventCalendar」に、今回のファイル群があります。
ファイル構成は次のとおりです。

eventCalendar/
 css/
   -51-us-default.css
   -config.css
   -customize.css
 js/
   -customize.js
   -config.js
 html/
  -config.html
 image/
   -icon.png
 manifest.json

プラグインの開発手順 パッケージング を参考に、「eventCalendar」をパッケージングします。

パッケージングしたサンプル

event_calendar_plugin.zip

更新履歴

2016/07/27 v1.0 を公開しました。

2016/07/29 v1.1を公開しました。

その他制限事項

  • スマートフォンでは、使用することができません。

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • プロセス管理が無効またはプラグイン設定画面とステータス名が合わない場合、イベント背景色は青色となります。

プラグイン拡張

更に本プラグインをカスタマイズにて拡張すれば、以下のようなことも実現可能です。

  • 日付をクリックすることで、デフォルトでクリックした日付が入った状態のレコード新規作成画面を表示する。
  • 日付の背景色や日付の数字の色を変更する。
  • 祝日の背景色や日付の数字の色を変更する。
  • モーダルウィンドウでレコード編集画面等を出すことで、完全に操作をカレンダー画面だけで完結させる。
  • 週の開始曜日を変更する。
  • 終日予定を登録する。
  • レコードが100件以上の場合でもすべてのイベントを表示する。
    ……など。

コメント

Avatar
高田 旭

カテゴリーを有効にしているアプリでこちらのプラグインを導入すると、
カテゴリー欄の横側が空白となり、カテゴリーの下端からカレンダーが表示されてしまいます。
プラグインで指定されているCSSの編集で本事象、解決可能でしょうか?

Avatar
武井 琢治

高田さん

 

確かにカテゴリーを設定するとおっしゃるような表示になりますね。

 

原因はフルカレンダーの.fc-clearというクラスのclear:bothというスタイルにあるようです。

これを解決するには、以下のような対応が必要となります。

 

  1. https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css をダウンロードします。
  2. ダウンロードしたcssの中の「.fc-clear{clear:both}」という記述を削除してプラグインのcssフォルダに保存します。
  3. プラグインのmanifesto.jsonを開きます。
  4. https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css を指定しているところを手順2で保存したcssに指定し直します。
  5. こちらなどを参考に、プラグインを再パッケージングして、アプリに当て直します。
武井 琢治により編集されました
Avatar
高田 旭

武井さん

丁寧な解決方法の説明ありがとうございますm(__)m しかも回答まで1時間以内…感服いたしました!

(記事の著者が武井さんだったので回答早いかな!?と内心期待していたのは内緒です)

 

ご提示頂いた対応方法にて無事にカレンダーを正常表示できました。これでカテゴリー機能の利用をあきらめずに済みます!

Avatar
MI

お世話になっております。当方開発初心者です。

サンプルプラグインをゲストスペースのアプリに追加しましたが、フィールド取得できませんでした。

こちらplugin-sdk内のファイル群を修正する必要がありそうですが、どのファイルのどの箇所を修正すればよいかご教示頂けますでしょうか?

Avatar
武井 琢治

Masahiko Isozakiさん

本プラグインはゲストスペース用には作成していないため、
各部修正しなければならない可能性があります。

一旦、フィールド取得出来ない件につきましては、
config.jsの以下のフィールド取得部分をゲストスペース用に変更しなければならないことは想像できます。

現状:
https://(サブドメイン名).cybozu.com/k/v1/preview/app/form/fields.json

ゲストスペースのアプリの場合:https://(サブドメイン名).cybozu.com/k/guest/(スペースのID)/v1/preview/app/form/fields.json

Avatar
MI

武井さま

早速ご丁寧にご回答頂きまして、誠にありがとう御座います。

ご教示の内容でフィールド情報が取得できました。

ただプラグイン設定後の保存(submit function)動作せずでした。

が、こちら本スレッド主旨からずれるかと存じますので、もう少し勉強してからコミュニティ側で質問するようにします。

 

Avatar
Toshi

「日付をクリックすることで、デフォルトでクリックした日付が入った状態のレコード新規作成画面を表示する。」

これは開発初心者でも実装可能でしょうか。

当方WEBデザインをメインとしておりまして、PHPを少しかじった事がある程度でJavaScriptは未経験です。

何か実装方法の参考となるサイト等をご教授いただけると幸いです。

 

Avatar
武井 琢治

Toshiさん

比較的簡単な方のカスタマイズではあると思います。

以下の表示イベントのページを参考にして下さい。
新規作成であればcreate.showの部分になるでしょう。
https://cybozudev.zendesk.com/hc/ja/articles/201941974-レコード表示イベント

そのイベント内で、
現在の日付を取得し、日付フィールドに挿入します。

また、moment.jsというライブラリを使用すると楽でしょう。

以下の記事が参考になりそうです。
https://cybozudev.zendesk.com/hc/ja/articles/204982474-Moment-js-を利用して-日時フィールドのフォーマットをカスタマイズする

Avatar
Toshi

武井 琢治さん

回答いただきまして有難うございます。

当方、javascript初心者で実装できるか危ういところでしたが参考URLをいただき色々と見直してみたところ実装できそうです。

 

ログインしてコメントを残してください。
Powered by Zendesk