cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

（著者：武井 琢治）

Index

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • プロセス管理が無効またはプラグイン設定画面とステータス名が合わない場合、イベント背景色は青色となります。
  • kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。
  • このプラグインの初回設定時には、kintoneシステム管理権限が必要です。

概要

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

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

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

主要なアップデート情報

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

完成形

レコード一覧画面（レコード登録後）

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

 

設定画面（設定例）

 

プラグインを利用する

STEP1:フォームを設定する

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

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

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

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

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

STEP3:プロセス管理を設定する（任意）

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

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

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

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

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

２．各項目を設定します。

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

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

３．[保存]をクリックします。

４．[アプリの設定]画面で[設定完了]をクリックすると、プラグインの設定がアプリに反映されます。
このとき、「スケジュール」という一覧が追加されます。

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

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

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

プラグイン開発のためのサンプルであり、サポート対象外であることをご理解の上、ダウンロードしてください。　

SAMPLE_eventcalendar_v1.4.2.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に置き換えました。

2021/02/01 v1.4.1を公開しました。一覧での絞り込み条件がカレンダーに反映されない不具合を修正しました。

2022/10/05 v1.4.2を公開しました。フロントエンド基盤の刷新に対応しました。

制限事項

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

プラグイン拡張

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

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

利用している OSS のライセンス情報

このプラグインで利用している OSS のライセンスは次のとおりです。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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をいただき色々と見直してみたところ実装できそうです。

 

Avatar
Hitoshi Nikoh

レコードがすでに100件以上ある（または登録が見込まれる）アプリにて本プラグインのカスタマイズ拡張で使いたいと思っていますが、具体的にはどの部分を変更することで100件以上の対応が可能になるのでしょうか。

JavaScriptはブランクがあるのですが、なんとかやってみたいと思っております。

Avatar
武井　琢治

Hitoshi Nikohさん

前提として、本プラグインはレコードが100件以上あるアプリでも、使用に問題はございません。

ただ、基本的に「一覧に表示されているレコードをカレンダーとして表示する」機能としておりますので、

kintoneでは標準機能で100件までのレコード表示が可能であるため、

101件以上レコードのあるアプリは、一度にすべてのレコードデータをカレンダーに表示できない、といった意味合いとなります。

 

さて、上記をカスタマイズにて表示可能にしたい場合ですが、

プラグイン内「customize.js」の41行目にあるrecords変数について、

event.recordsから取得するのではなく、kintone APIにて全件GETする必要がございます。

 

もしかすると、他の部分も影響があるかもしれませんが、

大きくはここを変更する必要があるように思います。

Avatar
Hitoshi Nikoh

武井　琢治様

早々の返答ありがとうございます。承知しました。

とても魅力的なプラグインのため、うまく活用していきたいと考えております。

現状コード修正をするのではなく、レコード件数をどう絞って表示させるか…というところで、フィルタ条件をうまく使いながらまわしていこうと思います。

今後ともよろしくお願いいたします。

Avatar
Hitoshi Nikoh

同じ日時に複数の予定が重なったときに、イベントの内容が半分隠れてしまうのは、なにか回避策ありますでしょうか？

Avatar
武井　琢治

Hitoshi Nikohさん

同じ日時にイベントを複数作成すると以下のようになります。

イベントの内容が半分隠れてしまうというのはどういった状態を指しますでしょうか？

 

また、上記でご質問いただいた100件以上のレコードもカレンダー上に全件表示したい件について、

近々そのようなアップデートを施した更新版プラグインがリリースされる予定です。

Avatar
Hitoshi Nikoh

「週」表示や「日」表示にした際に、重なってしまうのです。

新機能のリリース、連絡ありがとうございます。導入検討したいと思います。

Avatar
武井　琢治

Hitoshi Nikohさん

承知しました。

複数のイベントが同時刻で重なる部分がある場合の挙動については、

本プラグインにて使用しているFullCalendarの仕様であると言わざるを得ないため、

中々手を出しづらいというのが実情ではございます。

 

イベント全件表示のように、改修対象とすべきか検討させていただきます。

ご意見ありがとうございました。

Avatar
二河等

全件取得できるようになることを、プラグイン導入で確認できました。

が、デグレなのでしょうか、kintone側で設定した一覧の条件が無視されてしまうようです。

（＝特定の日付以降のみを表示するなどの条件設定がきいてないようです）

Avatar
武井　琢治

二河等さん

そちらはデグレというよりも、そういった仕様の変更となります。

もしそのような仕様のプラグインにしたい場合は、

全件取得ロジックに加え、条件検索を入れた場合には一覧表示イベントのeventレコードを使用するようにプラグインを改修することで解決できそうです。

条件検索を入れた場合、というのは、URLで判断することになるかと思います。

Avatar
Hitoshi Nikoh

ありがとうございます。新バージョンと旧バージョンで挙動を確認したいと思います。

参考までに、v1.0、v1.1のサンプルプラグインのzipをダウンロードしたいと思うのですが、

こちらは可能でしょうか？

Avatar
cybozu Development team

Hitoshi Nikoh　様

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

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

ご自身でパッケージング作業を行っても大丈夫でしたら、次の手順になります。

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

1.GitHubのhistoryからv1.0のファイルをダウンロード

2.v1.0をパッケージする。

3.v1.1とv1.0の差分のあるファイルをダウンロードする

4.３のファイルを１.のファイルに入れ替えてv1.1用のファイルを作成する。

5.４のファイルをパッケージする。

Avatar
Tatsu

はじめまして。
初歩的な質問で申し訳ございません。
fullcalenderのサイト（https://fullcalendar.io/）からGitHub（https://github.com/fullcalendar/fullcalendar/releases）へ行き、fullcalendar-3.4.0.zip　をダウンロードして、プラグインとして読み込もうとしているのですが、「インストールに失敗しました。プラグインのファイルが不足している、または正しくありません。」となり、インストールができません。
こちらの解決方法についてご教示いただけますと幸いです。

Avatar
高田 旭

Tatsu さん

githubからダウンロードしたものですと、kintoneのプラグイン形式にはなっていませんのでインストール失敗のエラーが出てしまいます。

本ページ記載の「サンプルプラグイン」という項目からeventcalender.zipをダウンロードしてkintoneにインストールしてみて下さい。

Avatar
Tatsu

高田様、ありがとうございます。おかげさまでインストールできました。

また、もしご存知でしたらお教えいただきたいことがあります。
インストールしたカレンダーを表示した状態で、フィルタをかけようとすると、フィルタがかかって当該情報のみがカレンダーに表示されるのが期待される動きだと思うのですが、実際はフィルタがかからず、”月”表示のカレンダーが表示されてしまいます。

もし、対策をご存知でしたらお教えいただけますと幸いです。

Avatar
高田 旭

インストールに成功したようで良かったです。

フィルタに関してですが、eventcalender.zipを展開するとeventcalendar\contents\jsの中にcustomize.jsというスクリプトがあります。

このスクリプトの中でカレンダー表示が行われる際のレコード取得を実行しているのですが、ここでレコード全件取得してしまうためにフィルタリングされないように見えてしまいます。

すぐに思いつく対策としては、

・絞り込み条件ごとに一覧を作成、レコード一覧画面表示イベントにて一覧名が●●だったら条件指定してレコード取得する。例えば…

        if (event.viewName === '今日以降のスケジュール') {
            var params = {
                'app': kintone.app.getId(),
                'query': '予約日付 >= FROM_TODAY order by $id desc limit 500 offset 0',
            };

こんな具合でレコード取得時のquery内容を、一覧名ごとに変更するのという手段が考えられます。

Avatar
Tatsu

高田様、そのようなやり方があるのですね。

詳細にお教えくださり感謝いたします。

Avatar
takokichi

はじめまして。

イベントカレンダ一覧ののイベント名「hh:mm　指定した文字列」の時間hh:mmを非表示にしたいと思っておりますが、

カスタムの仕方がわかりません。（config.jsかなと思いましたが、デベロッパーツールでソース確認できず）

修正するファイルとカスタムする箇所を教えていただくことはできますでしょうか。

 

 

 

takokichiにより編集されました
Avatar
Maru

はじめまして。初心者です。

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

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

と機能説明に記載がありますが、試したところ設定しても反応しません。

2017/05/08 v1.2のアップデートの影響なのでしょうか？

その場合、②を設定する具体的な記述方法を教えていただけないでしょうか。

（「番号」フィールドが「8888」のみのカレンダーを作成したいと考えてます。）

Avatar
cybozu Development team

takokichi様

プラグインのソースコードはGithubに公開されています。ご確認いただき、不明な点がありましたらコミュニティにてご質問ください。

https://github.com/kintone/plugin-sdk/tree/master/examples/eventCalendar

Avatar
cybozu Development team

Maru様

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

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

 

Avatar
Maru

教えていただきました前バージョンのファイルで無事にフィルタ機能を使用することが出来ました。

ありがとうございます！

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