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

kintone カスタマイズ
1

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

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

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

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

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

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

2

 

公式にあるサンプルのBasic viewsを入れると、表示は普通に出来ます。

 

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

【JavaScript】

・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/fullcalendar/v2.7.3/fullcalendar.min.js

・fc_basic_views.js （コードは後述）

【CSS】

・https://js.cybozu.com/fullcalendar/v2.7.3/fullcalendar.min.css

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

 

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

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

 

[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;
});
})();

 

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

 

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

3

ありがとうございます！

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