2013年3月24日日曜日

jQuery Plugin fullCalendarについてのメモ

jQuery Plugin fullCalendarについてのメモ

同梱のサンプル、や他者のサイトを参考に使い方のメモを創りました。


■ダウンロード先
http://arshaw.com/fullcalendar/

Ver 1.6

■基本的な使い方
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.表示したい領域に、divタグを定義して、IDに「calendar」と定義する。

【例】


2.モジュールの定義
※fullcalendar.min.jsもしくは、fullcalendar.jsを使用する








3.起動時実行スクリプトを編集
※オプションは別途説明

【例】
$(document).ready(function() {
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		editable: true //編集可能
	});
});



■Tips & Option
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1)表示内容を日本語にするには

起動時のオプションで指定する方法と、モジュールを直接変更するやり方がある。
モジュールは極力いじりたくないので、起動時に指定する方法で



header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,agendaWeek,agendaDay'
		//日付表示を簡略表示の場合  right: 'month,basicWeek,basicDay' 
},

//+++++タイトル部定義
titleFormat: {
	month: 'yyyy年 M月',
	week: '[yyyy年 ]M月 d日{ —[yyyy年 ][ M月] d日}',
	day: 'yyyy年 M月 d日 dddd'
},

//+++++カラム書式
columnFormat: {
	month: 'ddd',
	week: 'M/d(ddd)',
	day: 'M/d(ddd)'
},

//+++++曜日定義
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],

//+++++曜日定義
dayNamesShort: ['日','月','火','水','木','金','土'],

//+++++ボタン文字定義
buttonText: {
	prev: ' ◄ ',
	next: ' ► ',
	prevYear: ' << ',
	nextYear: ' >> ',
	today: '今日',
	month: '月',
	week: '週',
	day: '日'
},


2)カレンダーの枠を選択(通常に枠クリック、もしくは枠を複数ドラック)にて、イベント発生し
  新規の予定を追加する


//カレンダの枠内を選択し、新しいイベントを追加可能にする

//Allows a user to highlight multiple days or timeslots by clicking and dragging.
//http://arshaw.com/fullcalendar/docs/selection/selectable/
selectable: true,//カラム選択 

//Whether to draw a "placeholder" event while the user is dragging.
//http://arshaw.com/fullcalendar/docs/selection/selectHelper/
selectHelper: true,//ドラッグによるイベント範囲指定

//Selectイベント
select: function(start, end, allDay) {
	var title = prompt('Event Title:');//タイトル入力
	
	if (title) {//タイトルの入力があるとき
	
		new_id++;//test id
		
		//イベントの登録 renderEventメソッド
		//http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
		$('#calendar').fullCalendar('renderEvent',
			{
				id: new_id,
				title: title,
				start: start,
				end: end,
				allDay: allDay
			},
			true // make the event "stick"
		);
	}
	//選択解除 A method for programmatically clearing the current selection.
	//http://arshaw.com/fullcalendar/docs/selection/unselect_method/
	$('#calendar').fullCalendar('unselect');
},


途中の new_id 変数は、テストでIDを振っているので、起動時にグローバル変数として、0を設定する。


3)カレンダーに登録されているイベントを編集可にする

//編集不可 Determines whether the events on the calendar can be modified.
//http://arshaw.com/fullcalendar/docs/event_ui/editable/
editable: true,



4)ダブルクリックイベントで、登録済みのイベントを修正

//既に編集済みのイベントをダブルクリックして、編集できるようにする
eventDblClick:function(event, jsEvent){
	
	var title = prompt('予定を入力してください:', event.title);
	if(title && title!=""){
		event.title = title;
		//updateEvent      Reports changes to an event and renders them on the calendar.
		//http://arshaw.com/fullcalendar/docs/event_data/updateEvent/
		$('#calendar').fullCalendar('updateEvent', event); //イベント(予定)の修正
	}else{
		//removeEventSource     Dynamically removes an event source.
		//http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/
		$('#calendar').fullCalendar("removeEvents", event.id); //イベント(予定)の削除             
	}
},



※本イベントを有効にするためには、モジュールに対し修正が必要
function eventElementHandlers(event, eventElement)に、以下の5行を追加

.dblclick(
	function(ev) {
			return trigger('eventDblClick', this, event, ev);
		}
)


5)ドラックドロップのイベント

//ドラック&ドロップ時のイベント
eventDrop: function(event, delta) {
	alert("ドラックされました  "+event.id);
},


6)ビューが表示されたときのイベント(ここで、表示されたviewのイベントデータを読み込み展開)

viewDisplayイベントを使って、viewが表示される時に、対象のイベントデータを読み込む
Triggered when the calendar loads and every time a different date-range is displayed.
http://arshaw.com/fullcalendar/docs/display/viewDisplay/




viewDisplay: function(view) {//ビューが表示されたとき呼び出し

	//ビューのロード時にイベントを読み込む
	$.ajax({
		url: "json_event.php",
		dataType: 'json',
		type:"post",
		data: {
			"start": view.start.toString(),
			"end": view.end.toString(),
		},
		success: function(EventSource) {
			$('#calendar').fullCalendar('removeEvents');
			$('#calendar').fullCalendar('addEventSource', EventSource);
		}
	});
},

※json_event.php は、demosにあるphpプログラムを持ってくる


7)HTMLで直接初期表示する場合

eventSources: [

	// your event source
	{
		events: [ // put the array in the `events` property
			{
				id:100,
				title  : 'event1',
				start  : '2013-03-01'
			},
			{
				id:101,
				title  : 'event2',
				start  : '2013-03-05',
				end    : '2013-03-07'
			},
			{
				id:102,
				title  : 'event3',
				start  : '2013-03-09 12:30:00',
				end  : '2013-03-09 15:30:00',
				allDay : false // will make the time show
			},
			{
            	id:103,
				title: 'Meeting',
				start: new Date(y, m, d, 10, 30),
				allDay: false
			},
			{
            	id:104,
				title: 'Lunch',
				start: new Date(y, m, d, 12, 0),
				end: new Date(y, m, d, 14, 0),
				allDay: false
			}
        ],

	//ここで、イベントの項目の色を指定出来る


		color: 'black',     // an option!
		textColor: 'yellow' // an option!
	}

    // any other event sources...

]





0 件のコメント:

コメントを投稿