現状、モバイル版のkintoneでは、カレンダー表示を利用することはできません。 先日実装されたモバイル版カスタマイズビューを用いて、カレンダー表示する例を紹介します。
サンプル
「タスク名」と「締切」をカレンダー表示します。
フォーム設定
コード
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を読み込んでください。
HTML(カスタマイズビュー)
現状、「JavaScript / CSSでカスタマイズ」には「スマートフォン用のCSSファイル」の項目は用意されていないので、HTMLからCSSファイルを読み込みます。
\<divid="calendar"\>\</div\>\<linkrel="stylesheet"href="https://js.cybozu.com/fullcalendar/v3.9.0/fullcalendar.min.css"\>
JavaScript
・sample.js
(function(){"use strict";kintone.events.on('mobile.app.record.index.show',function(event){if(event.viewName!=='カレンダー')return;kintoneUtility.rest.getAllRecordsByQuery({app:kintone.mobile.app.getId()}).then(function(response){$('#calendar').fullCalendar({height:500,//対象となるデバイスのサイズに合わせて調整してくださいevents:response.records.map(function(record){return{start:record.締切.value,title:record.タスク名.value+'締切'};}),eventClick:function(e){alert(e.title);}});});});})();