# カレンダー表示形式について

**URL:** <https://community.cybozu.dev/t/topic/2561>\
**Category:** kintone 開発相談\
**Created:** [2016 年 7 月 1 日午前 5:49 UTC](https://community.cybozu.dev/t/topic/2561 "2016-07-01T05:49:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account508](https://avatars.discourse-cdn.com/v4/letter/l/f0a364/32.png) [@Legacy\_Account508](https://community.cybozu.dev/u/Legacy_Account508)\
**Post date:** [2016 年 7 月 1 日午前 5:49 UTC](https://community.cybozu.dev/t/topic/2561/1 "2016-07-01T05:49:43Z")

</div>

スケジュール管理アプリを利用しているのですが、

標準では月表示のところを週表示へ切り替えれるようにしたいと思っています。

Cybozu CDNのfullcalendarを利用したいと思い試しているのですが、

カスタマイズビューに表示すらできません。

どなたかご教授いただけないでしょうか。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1574](https://avatars.discourse-cdn.com/v4/letter/l/76d3ee/32.png) [@Legacy\_Account1574](https://community.cybozu.dev/u/Legacy_Account1574)\
**Post date:** [2016 年 7 月 2 日午後 12:59 UTC](https://community.cybozu.dev/t/topic/2561/2 "2016-07-02T12:59:16Z")

</div>

&nbsp;

[公式](http://fullcalendar.io/)にあるサンプルの[Basic views](http://fullcalendar.io/js/fullcalendar-2.8.0/demos/basic-views.html)を入れると、表示は普通に出来ます。

&nbsp;

[kintoneに入れるカスタマイズファイル]

【JavaScript】

・[https://js.cybozu.com/jquery/2.2.4/jquery.min.js](https://js.cybozu.com/jquery/2.2.4/jquery.min.js)

・[https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js](https://js.cybozu.com/momentjs/2.13.0/moment-with-locales.min.js)

・[https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.js](https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.js)

・fc\_basic\_views.js （コードは後述）

【CSS】

・[https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css](https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css)

※fullcalendar.print.css は media printの指定が出来ないので、設定画面から入れると逆に上手くいきません

&nbsp;

[カスタマイズビューのHTML]

```
<div id='calendar'></div>

```

&nbsp;

[fc\_basic\_views.js（Basci Viewsのkintoneへの適用）]

```
(function() {
"use strict";

kintone.events.on(['app.record.index.show'], function(event) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-06-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-06-01'
},
{
title: 'Long Event',
start: '2016-06-07',
end: '2016-06-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-16T16:00:00'
},
{
title: 'Conference',
start: '2016-06-11',
end: '2016-06-13'
},
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-06-28'
}
]
});
return event;
});
})();

```

&nbsp;

Basic Viewsをkintoneに乗せ換えただけですが、これで一応いけるので、あとはfullcalendarのイベントに合わせて、APIでレコードを取得してからの表示にする等すればよいかと思います。

&nbsp;

なお、経験上日付・時間処理がふんだんに入ることもあって慣れてないと表示以上のカスタマイズは結構パワーを要することから、（チェック済みかもしれませんが、）fullcalendarを使ったプラグイン「[カレンダーPlus（試用あり）](http://radical-bridge.com/product/calendarPlus.html)」がリリースされていますので、こちらの利用も検討されると良いかと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account105](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@Legacy\_Account105](https://community.cybozu.dev/u/Legacy_Account105)\
**Post date:** [2016 年 7 月 6 日午前 7:13 UTC](https://community.cybozu.dev/t/topic/2561/3 "2016-07-06T07:13:28Z")

</div>

ありがとうございます！

試してみたいと思います！！