kintoneの標準機能では、他のアプリのレコードをカレンダー表示に利用することはできません。 今回は、カスタマイズビューにて他アプリと連携しながらカレンダー表示する例を紹介します。
サンプル
「イベントマスタ」と「イベント申込者リスト」を連携して、申込状況を含んだイベントカレンダーを表示します。
フォーム設定
・イベントマスタ
・イベント申込者リスト
※「イベントマスタのレコード番号」と「イベント申込者リストのイベントID」を紐づけています。
コード
jQuery、Moment.js、FullCalendar、kintone Utility Library for JavaScriptを利用しています。 jQuery、Moment.js、FullCalendarについてはCybozu CDNからご利用ください。 kintone Utility Library for JavaScriptについては、下記から利用できます。
https://kintone.github.io/kintoneUtility/kintoneUtility.min.js
上記4つを順番に読み込み後、後述のsample.jsを読み込んでください。 FullCalendarについてはCSSファイルも忘れずに読み込んでください。
HTML(カスタマイズビュー)
\<divid="calendar"\>\</div\>
カスタマイズビュー名は「カレンダー」としています。
JavaScript
(function(){"use strict";kintone.events.on('app.record.index.show',function(event){if(event.viewName!=='カレンダー')return;kintone.Promise.all([kintoneUtility.rest.getAllRecordsByQuery({app:kintone.app.getId()}),kintoneUtility.rest.getAllRecordsByQuery({app:\*\*\*\*})//イベント申込者リストのアプリID]).then(function(responses){vareventParticipants={};responses[0].records.forEach(function(record){eventParticipants[record.レコード番号.value]=[];});responses[1].records.forEach(function(record){eventParticipants[record.イベントID.value].push(record.申込者名.value);});$('#calendar').fullCalendar({height:500,events:responses[0].records.map(function(record){return{start:record.日付.value,title:record.イベント名.value+'('+eventParticipants[record.レコード番号.value].length+'/'+record.定員.value+'人)',description:eventParticipants[record.レコード番号.value].length?eventParticipants[record.レコード番号.value].join(','):'申込者がいません。'};}),eventClick:function(e){alert(e.description);}});});});})();
カスタマイズビューを用いれば、標準機能で利用できなかったフィールド(サブテーブルなど)をカレンダーに表示することもできそうですね。