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>

というふうにソースで読み込む。タグの中の"head"・"body"・"footer"タグのいずれかの中に組み込む形になるかと思います。

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

導入方法~パッケージ管理ツール（Node.js)で入れたい場合~

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

import $ from 'jquery';
import 'fullcalendar';

というふうにソースで読み込むことで使うことができます。

使い方

実際に使ってみましょう。

<html>
<!--HTMLタグの中にこう↓↓書きます。ここのdiv要素にCalendarが書き込まれて表示されます -->
<div id="calendar"></div>
</html>
<script type="text/javascript">
<!--scriptタグの中にこう↓↓書きます。scriptタグの書き方はプロジェクト毎に変えてください-->
$(function() {
  // 初期処理
  $('#calendar').fullCalendar({
    // ここに各種オプションを書いていくと設定が適用されていく
  })
});
</script>

日本語化

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

を追加でheaderタグの中やfooterタグの中に書いて読み込みましょう。

各種オプションの中に入れられるものの紹介

header

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

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

同様にfooterもある。

events

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

events{
 {title:"test1",start:"2018-10-31",end:"2018-11-01"},
 {title:"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]
//これで月水金曜日が表示されなくなる

再描画をしたい時

再描画したい時はこの３行でカレンダーの再読み込みが可能。
関数化すると楽。

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

まとめ

fullcalendarを使うとGoogle Calendarのようなカレンダーが簡単に実装することができます。
設定もかなり柔軟にできるのでいろいろ触ってみてください。

fullcalendarを使おう！