カテゴリー内の他の記事

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

フォローする

(著者:Cstap 武井 琢治)

Index

概要

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

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

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

主要なアップデート情報

2017/05/08 レコードを全件取得してカレンダーで表示できるようにコードを変更しました。(以前は100件までの取得でした)

完成形

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

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

 

設定画面(設定例)

 

プラグインを利用する

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分ごとに伸縮できます)

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

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

サンプルプラグイン

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

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

こちらの手順を参考にパッケージングします。

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

eventcalendar_v1.4.zip

更新履歴

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

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

2017/05/08 v1.2を公開しました。レコードを全件取得してカレンダーで表示できるようにコードを変更しました。

2017/08/25 v1.3を公開しました。css「51-us-default.css」を「51-modern-default.css」に修正、他軽微な修正を行いました。

2017/12/01 v1.4を公開しました。プログラムで使用しているフォーム設計情報取得APIを、フィールドの一覧を取得するAPIに置き換えました。

制限事項

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

注意事項

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

プラグイン拡張

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Maru

たびたび恐れ入ります。

以前パッケージングしなおすことで、フィルタは使用できるようになりましたが、やはり一覧に表示される100件のみではなく

フィルタ後の全件レコードでカレンダーを使用したいと考えております。

フィルタ条件としては、グループフィールドの内容によって3パターン作成したいです。

(グループAの場合はカレンダーA、グループBの場合はカレンダーB、グループCの場合はカレンダーC)

その場合、「customize.js」の全件取得ロジックのあたりを変更するかと思いますが、どのように変更すればよいかアドバイス

いただけないでしょうか。

Avatar
cybozu Development team

Maru 様

お世話になっております。cybozu developer network 事務局でございます。

現状:
最新版は100件以上のレコードでカレンダーをご利用頂けますが、フィルターがございません。
古いバージョンはフィルターをご利用いただけますが、100件以上のご利用はできません。

また、フィルター付き且つ100件以上の表示を対応する予定はございませんので、ご期待を応えられず申し訳ございません。

ご自身でJSファイルをいじってみたいのであれば、cybozu developer コミュニティでご質問いただければ、有志達が色々アドバイスくれるかと思います。

ぜひそちらをご活用ください。

Avatar
kintone初心者

Internet Explorer 11(Windows 7/10)でカレンダーが表示されなくなりました。

Microsoft EdgeおよびGoogle Chrome(Windows 7/10)では問題なく表示されています。

また、kintoneの標準カレンダーであればInternet Explorerでも問題ありません。

 

皆様の環境ではいかがでしょうか。

対応策をご教示いただければ幸いです。

Avatar
cybozu Development team

kintone初心者 様

お世話になっております。cybozu developer network 事務局でございます。

 

こちらで、Internet Explorer 11 かつ 最新版のプラグインで試したところ、

問題なくカレンダー表示されることが確認できました。

 

よろしければ不具合の再現方法をご連絡いただけないでしょうか。

Avatar
kintone初心者

早速のご確認、ありがとうございます。

プラグインバージョンの記載を失念しておりました。失礼いたしました。

プラグインはコメント欄(2017年07月25日)にアップロードされていた前バージョンのものです。

 

先程最新版で試してみたのですが、正常にカレンダーが表示されました。

前バージョンに戻すとやはり表示されません。

フィルター機能が必要なので前バージョンを使用したいのですが、難しいでしょうか。

Avatar
cybozu Development team

kintone初心者 様

お世話になっております。

 

プラグインv1.0 かつ IE11で正常に表示されることが確認できました。

 

申し訳ございませんが、パッケージングしたサンプルは最新版のものしかありません。

ご自身でパッケージング作業を行っても大丈夫でしたら、こちらのコメントの手順1,2を参考に、

v1.0のファイルをダウンロード後、パッケージング作業をして頂けますでしょうか。

プラグインのパッケージはパッケージングをご参考ください。

Avatar
kintone初心者

ご返信ありがとうございます。

それではv1.0のパッケージングにトライしてみようと思います。

参考までにですが、こちらのコメントに添付されているファイルのバージョンを教えていただくことは可能でしょうか。

 

(以下コメント欄よりコピー)

cybozu Development team2017年07月25日 17:55

Maru様

ご指摘のとおり、新バージョンで全件取得する関数を入れたことで、フィルタによる絞込が機能しない状況となっておりました。

お手数ですが、こちらの前バージョンのファイルをダウンロードしてお試しいただけますでしょうか。

Avatar
cybozu Development team

kintone初心者 様

お世話になっております。

 

そちらのバージョンですが、v1.1となっています。

また、パッケージングにあたりお困りの際は、コミュニティをご活用ください。

有志達が色々アドバイスくれるかと思います。

 

宜しくお願い致します。

Avatar
kintone初心者

お世話になっております。

v1.0のプラグインをパッケージングし、IE11でカレンダーが表示されることを確認できました。

こちらで様子を見てみようと思います。

この度はご対応いただき、誠にありがとうございました。

Avatar
nfujii

フィルタによる絞り込み条件ですが、
ビューのfilterCond を参照し、fetchRecords()の第二引数に渡すことで反映できました。
ご参考までにソースを添付します。

// レコード一覧画面表示イベント
kintone.events.on('app.record.index.show', function(event) {
var config = kintone.plugin.app.getConfig(PLUGIN_ID);
if (!config) {
return false;
}
var filterCond = '';
var records = [];
new kintone.Promise(function(resolve, reject) {

        // 自プラグインで作成したビューIDのfilterCond取得
        kintone.api(kintone.api.url('/k/v1/app/views', true), 'GET', {
         'app': kintone.app.getId()
        }).then(function(scheResp) {
         for (var k in scheResp.views) {
                if (scheResp.views[k].id === config['viewId']) {
                    filterCond = scheResp.views[k].filterCond;
                    break;
                }
         }
         resolve();
        }, function(error) {
         reject(error);
        });

    }).then(function() {

        // プラグインをインポートしたアプリのレコード取得
        return new kintone.Promise(function(resolve, reject) {

         fetchRecords(kintone.app.getId(), filterCond).then(function(calRecords) {
                records = calRecords;
                resolve(event);
        });
    });

}).then(function() {

    var evTitle = config.name;
    var evStart = config.start_datetime;
    var evEnd = config.end_datetime;

    var startDate;
    var endDate;
    var urlData = '';

    var recEvents = [];
    // アプリにレコードがある場合のみループ
if (records.length !== 0) {
         :(以降はサンプル同様)

 

nfujiiにより編集されました
Avatar
原島陵

お世話になります。

カレンダーはプラグインできたのですが、入力した人によって色を変えることは出来ますか?

現在ステータスの変更時に色が変わる設定ですが、

社長は赤、一般従業員は青

とかいかがでしょうか?

Avatar
cybozu Development team

原島陵 様

お世話になっております。cybozu developer network 事務局です。

こちらのカレンダープラグインには、お問い合わせいただいた機能はございません。

プラグインのソースコードは公開しておりますので、カスタマイズして機能拡張頂くことは可能です。
https://github.com/kintone/plugin-examples/tree/master/examples/eventCalendar

カスタマイズ時の不明点につきましては、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

以上、よろしくお願いいたします。

Avatar
erika

お世話になっております。
こちらのプラグインv1.4の導入をしたいと思っているのですが、
レコード全件表示がされない(全て見るが表示される)状態で困っております。
(IE,Google,FOXで試しましたがどれも表示されませんでした)


記事もだいぶ古いものですので、最新のKINTONEに合わないのか、はたまた自分の設定が悪いのか。。
一応軽くデバッグを試みたところ全件取得は問題なく行われているようなので、
レコード一覧画面表示イベントが怪しいと踏んでいるのですが、解決できないでいます。
お忙しい中大変恐縮ですが、ご教授頂ければと思います。
宜しくお願い致します。

Avatar
cybozu Development team

erika様

当方でv1.4のプラグインで問題は再現しなかったため、環境依存の問題かと思われます。

以下のような点をご確認いただけますでしょうか。よろしくお願いいたします。

- アプリをはじめから作成して、設定が可能か
 (文字列一行フィールドが1つ、日時フィールド2つがあるアプリがあれば設定可能です)

- 他のプラグインやJSカスタマイズと競合していないか

- 開発者コンソールにどのようなエラーが出ているか

Avatar
erika

ご連絡ありがとうございます。
インラインにてお返事を失礼いたします。

- アプリをはじめから作成して、設定が可能か
 (文字列一行フィールドが1つ、日時フィールド2つがあるアプリがあれば設定可能です)
⇒新規アプリ追加を行いましたが、やはり「すべて見る」が表示されている状態です。

- 他のプラグインやJSカスタマイズと競合していないか
⇒同アプリにイベントカレンダープラグイン以外は未設定です。

- 開発者コンソールにどのようなエラーが出ているか
⇒FOXで確認をしましたが、javascriptのエラーはないようで、cssのワーニング?があるようです。

お忙しい中大変恐縮ですが、宜しくお願い致します。

Avatar
cybozu Development team

Erika様

こちらで、不具合があるのだと勘違いしておりました。失礼しました。

同一日にイベントが3件以上の場合「すべて見る」が表示されるのは正しい動作です。

「すべて見る」をクリックした分をあわせて、全件表示ができるという仕様になっております。

以前の仕様では、レコードが101件以上あった場合は「すべて見る」上にも表示できなかったということになります。

Avatar
erika

ご連絡ありがとうございます。
こちらの状態がデフォルトだったのですね。

前のコメント欄で3件以上表示されている状態の画像がありましたので、
てっきり3件以上表示ができるものだと勘違いしておりました。
(あれはカスタマイズされたものなのでしょうかね。。)

お手数をお掛け致しまして申し訳ありませんでした。
また、ご対応いただきありがとうございました。

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