現状、モバイル版の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ファイルを読み込みます。
<div id="calendar"></div> <link rel="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); } }); }); }); })();
0件のコメント