Edited at

fullcalendarを使おう!


fullcalendarとは

オープンソースのjavascriptライブラリ。

カレンダーのUIや実装を簡単にできる優れもの。


導入方法~ダウンロードした場合~

https://fullcalendar.io/download

からダウンロード。

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />

<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

というふうにソースで読み込む。

※moment.jsとjquery.jsも必要ですが上記でダウンロードした場合は入っています。


導入方法~パッケージ管理ツールで入れた場合~

$ npm install fullcalendar

※入っていなければ$ npm install jQuery

import $ from 'jquery';

import 'fullcalendar';

というふうにソースで読み込む


使い方

<div id="calendar"></div>

$(function() {
// 初期処理
$('#calendar').fullCalendar({
// ここに各種オプションを書いていくと設定が適用されていく
})
});


日本語化

<script src='fullcalendar/dist/locale/ja.js'></script>

を追加で読み込みましょう。


各種オプション


header

カレンダー上部にコントロールなどを配置可能。

header{

left:"prev,today,next", //ヘッダー左側
center: 'title', //ヘッダー中央
right: 'month,agendaWeek,agendaDay,listYear' //ヘッダー右側
}

同様にfooterもある。


events

ここに描画したいイベントをjson表記で渡すと描画することができる

events{{tite:"test1",start:"2018-10-31",end:"2018-11-01"},{titele:"test2",start:"2018-08-31T08:30:00",end:"2018-09-01T00:01:00"}}


dayClick

日付をクリックした時にその日付の情報とjs情報、viewの情報を元にごにょごにょできる

dayClick: function(date, jsEvent, view) {

//クリックした日付が取れるよ
alert('Clicked on: ' + date.format());
}


eventClick

イベントをクリックした時にそのイベント情報とjs情報、viewの情報を元にごにょごにょできる

eventClick: function(item, jsEvent, view) {

//クリックしたイベントのタイトルが取れるよ
alert('Clicked on: ' + item.title);
}


eventDrop

イベントをドラッグアンドドロップした時に情報を元にごにょごにょできる

eventDrop: function(item, delta,revertFunc,jsEvent,ui, view) {

//ドロップした情報
alert('Clicked on: ' + item.title);
//ドロップしたことを元に戻したいとき
revertFunc();
}


firstDay

週の初めの曜日番号を指定する

firstDays:1

//これで月曜日から始まるカレンダーが表示される


hiddenDays

隠したい曜日があれば曜日番号を指定する

hiddenDays:[1,3,5]

//これで月水金曜日が表示されなくなる


再描画をしたい時

再描画したい時はこの3行でカレンダーの再読み込みが可能。

関数化すると楽。

        $('#calendar').fullCalendar( 'removeEvents' );

$('#calendar').fullCalendar( 'addEventSource',"イベントのデータをここに入れる" );
$('#calendar').fullCalendar( 'rerenderEvents' );


まとめ

fullcalendarを使うとGoogle Calendarのようなカレンダーが簡単に実装することができます。

設定もかなり柔軟にできるのでいろいろ触ってみてください。


参考

https://fullcalendar.io/docs#toc