新規投稿
フォローする

モバイル版でカレンダー表示

Avatar
江田篤史

現状、モバイル版の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);
        }
      });
    });
  });
})();
1

0件のコメント

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