[FullCalendar]たった２行の追加でFullCalendarをiPad対応にするスクリプト

jquery.ui.touch

FullCalendarをiPad等のタッチ操作に対応させる方法はいくつかあるみたいですが、今のところ上記のスクリプトを使うのが一番簡単だと思います。

使い方は以下。

ヘッダで上記スクリプトを読み込んで。

<script src="jquery.ui.touch.js"></script>

1	<script src="jquery.ui.touch.js"></script>

カレンダー設定後にaddTouchを付加する。

$(document).ready(function() {

	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();
	
	var calendar = $('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
	});
	
	$('#calendar').addTouch();
});

$(document).ready(function() {

var date = new Date();

var d = date.getDate();

var m = date.getMonth();

var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

});

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

});

example(iPadで見てください）

動作確認：iPad(iOS6)

イベント（スケジュール）の登録、移動、時間の変更をタッチ操作で行うことができます。
一応iPhoneでも操作できるはずですが小さすぎてあまり実用的ではありません。また、iPad以外のタブレット端末では動作確認してません。

【備考】
タッチ操作の場合タッチ（クリック）でスケジュールの登録を行わせると誤操作しやすいので、スケジュールの登録は別のイベント（ダブルクリック）などに割り振った方がよさそう。

投稿者: shimizu