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

**URL:** <https://community.cybozu.dev/t/topic/3532>\
**Category:** kintone 開発相談\
**Created:** [2018 年 11 月 15 日午前 7:29 UTC](https://community.cybozu.dev/t/topic/3532 "2018-11-15T07:29:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2018 年 11 月 15 日午前 7:29 UTC](https://community.cybozu.dev/t/topic/3532/1 "2018-11-15T07:29:21Z")

</div>

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

## サンプル

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

### フォーム設定

・イベントマスタ

・イベント申込者リスト

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

### コード

[jQuery](https://jquery.com/)、[Moment.js](https://momentjs.com/)、[FullCalendar](https://fullcalendar.io/)、[kintone Utility Library for JavaScript](https://community.cybozu.dev/hc/ja/articles/115000333223)を利用しています。 jQuery、Moment.js、FullCalendarについては[Cybozu CDN](https://community.cybozu.dev/hc/ja/articles/202960194)からご利用ください。 kintone Utility Library for JavaScriptについては、下記から利用できます。  
[https://kintone.github.io/kintoneUtility/kintoneUtility.min.js](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);}});});});})();

```

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