# モバイル版でカレンダー表示 **URL:** \ **Category:** kintone 開発相談\ **Created:** [2018 年 12 月 18 日午前 3:30 UTC](https://community.cybozu.dev/t/topic/3640 "2018-12-18T03:30:22Z")\ **Posts on this page:** 4\ **Page:** 1
**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 年 12 月 18 日午前 3:30 UTC](https://community.cybozu.dev/t/topic/3640/1 "2018-12-18T03:30:22Z")
現状、モバイル版のkintoneでは、カレンダー表示を利用することはできません。 先日実装されたモバイル版カスタマイズビューを用いて、カレンダー表示する例を紹介します。 ## サンプル 「タスク名」と「締切」をカレンダー表示します。 ### フォーム設定 ### ### コード [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%E3%80%8D%E3%81%8B%E3%82%89%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82) 上記4つを順番に読み込み後、後述のsample.jsを読み込んでください。 HTML(カスタマイズビュー) 現状、「JavaScript / CSSでカスタマイズ」には「スマートフォン用のCSSファイル」の項目は用意されていないので、HTMLから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);}});});});})(); ``` ---
**Author:** ![Legacy\_Account1207](https://avatars.discourse-cdn.com/v4/letter/l/58f4c7/32.png) [@Legacy\_Account1207](https://community.cybozu.dev/u/Legacy_Account1207)\ **Post date:** [2023 年 6 月 10 日午前 3:33 UTC](https://community.cybozu.dev/t/topic/3640/2 "2023-06-10T03:33:31Z")
自分の環境でも試してみたのですが、カレンダーが表示されませんでした。     fullcalendarが3.10.0だからでしょうか？ ---
**Author:** ![Legacy\_Account1207](https://avatars.discourse-cdn.com/v4/letter/l/58f4c7/32.png) [@Legacy\_Account1207](https://community.cybozu.dev/u/Legacy_Account1207)\ **Post date:** [2023 年 6 月 10 日午後 1:47 UTC](https://community.cybozu.dev/t/topic/3640/3 "2023-06-10T13:47:30Z")
上記、自己解決できました。 ### スマートフォン用のJavaScript / CSSファイル に同じ設定をすればうまくいきました。 お騒がせいたしました。 ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\ **Post date:** [2023 年 11 月 9 日午前 7:38 UTC](https://community.cybozu.dev/t/topic/3640/4 "2023-11-09T07:38:00Z")
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。