簡単にカレンダー機能を実装できるライブラリ、FullCalendar

簡単にカレンダー機能を実装できるfullcalendarというライブラリがあるので紹介します。

fullcalendar.io

ダウンロードは以下から

http://fullcalendar.io/download/

簡単にHTML内に埋め込み実装できます。

ダウンロードしてきた中身の、

「fullcalendar.min.js」

「fullcalendar.min.css」

「moment.min.js」

「jquery-ui.custom.min.js」

上記をそれぞれディレクトリに配置。

以下の順番で、HTMLに読み込ませます。

<!-- JavaScript -->
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>
<script type="text/javascript" src="js/ja.js"></script>

ここで注意が必要で、moment.min.jsを先に読み込ませます。

moment.min.jsを先に読み込ませないとエラーになります。

moment.min.jsの詳細は以下

日付処理を簡単に行ってくれるライブラリです

http://momentjs.com/
qiita.com

FullCalendar内で日付処理を行う際に利用しています。

<!-- CSS -->
<link href="css/fullcalendar.min.css" rel="stylesheet" type="text/css">

<!-- JavaScript -->
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>
<script type="text/javascript" src="js/ja.js"></script>

HTML側にはこの一文

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

JSファイルに以下の文

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

これでほぼ完成。実装は簡単です。
オプション設定をすることで自分好みのカレンダーにカスタマイズすることができます。

$('#calendar').fullCalendar({
	//ヘッダーの設定
	header: {
		//それぞれの位置に設置するボタンやタイトルをスペース区切りで指定できます。指定しない場合、非表示にできます。
		// 'title'→月・週・日のそれぞれの表示に応じたタイトル
		// 'prev'→前へボタン
		// 'next'→次へボタン
		// 'today'→当日表示ボタン
		left: 'today prev', //左側に配置する要素
		center: 'title', //中央に配置する要素
		right: 'next' //右側に配置する要素
	}

	height: 960, //高さをピクセルで指定
	defaultView: 'agendaDay', //初めの表示内容を指定　内容はこちらを参照→ http://fullcalendar.io/docs/views/Available_Views/
	aditable: true, //trueでスケジュールを編集可能にする
	allDaySlot: false,　//falseでagendaDay表示のときに全日の予定欄を非表示にする
	
	//時間の表示フォーマットを指定する　指定方法はこちらを参照→http://momentjs.com/docs/#/displaying/format/
	timeFormat: {
		agenda: 'h(:mm)'
	},
	slotEventOverlap: false, //スケジュールが重なったとき、重ねて表示するかどうか（falseにすると、重ねずに表示する）
	axisFormat: 'H:mm', //時間軸に表示する時間の表示フォーマットを指定する(ヒョジ方法はtimeFormatと同じ)
	slotDuration: '01:00:00', //表示する時間軸の細かさ
	snapDuration: '01:00:00', //スケジュールをスナップするときの動かせる細かさ
	minTime: "00:00:00", //スケジュールの開始時間
	maxTime: "24:00:00", //スケジュールの最終時間
	defaultTimedEventDuration: '01:00:00', //画面上に表示する初めの時間(スクロールされている場所)
	eventClick: function(event) { //イベントをクリックしたときに実行

	},
	dayClick: function(date){ //イベントじゃないところをクリックしたとき(日をクリックしたとき)に実行

	},
	droppable: true, //外部要素からのドラッグアンドドロップを可にする
	drop: function(date){ //外部要素からドラッグアンドドロップしたときに実行

	},
	eventDragStop: { //カレンダー上にドラッグし終わったときに実行

	}

	//カレンダーを再描画
	$('#calendar').fullCalendar('rendar');

	//カレンダーを削除
	$('#calendar').fullCalendar('destroy');

	//イベントを追加
	$('#calendar').fullCalendar('renderEvent', event, true); //eventはeventオブジェクト

	//イベントを更新
	$('#calendar').fullCalendar('updateEvent', event);


});

こんな感じにカスタムすることもできます。

また、カレンダーをアプリケーション機能と組み合わせて実用的なカレンダーを作ることもできます。
詳しくは以下の記事を参考に。

qiita.com

Google Calendar APIとつなぎ込めば情報の共有などもできます。

blog

紫陽花

簡単にカレンダー機能を実装できるライブラリ、FullCalendar