新規投稿
フォローする

他アプリと連携したカレンダー表示

kintoneの標準機能では、他のアプリのレコードをカレンダー表示に利用することはできません。 今回は、カスタマイズビューにて他アプリと連携しながらカレンダー表示する例を紹介します。

サンプル

「イベントマスタ」と「イベント申込者リスト」を連携して、申込状況を含んだイベントカレンダーを表示します。

フォーム設定

・イベントマスタ

・イベント申込者リスト

※「イベントマスタのレコード番号」と「イベント申込者リストのイベントID」を紐づけています。

コード

jQueryMoment.jsFullCalendarkintone 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(カスタマイズビュー)

<div id="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){
      var eventParticipants = {};
      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);
        }
      });
    });
  });
})();

カスタマイズビューを用いれば、標準機能で利用できなかったフィールド(サブテーブルなど)をカレンダーに表示することもできそうですね。

1

0件のコメント

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