2010年4月9日金曜日

jQueryのFullCalendarが素敵

FullCalendar
http://arshaw.com/fullcalendar/

Google Calendarっぽいカレンダーが簡単に作れる。

クリックしてイベントを追加できなかったので、追加できるようにしてみた。あと、イベントクリック時のアクションもドキュメントにあったので試してみた。

修正したのはexamples/agenda-views.html

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events : [
イベントたち
]
// 以下を追加
,
// カレンダーのどこかをクリックしたらイベントを作る
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('addEventSource', [{
title: 'no title',
start: date,
allDay: allDay
}]);
},
// イベントをクリックしたらタイトルをhogeに変える
eventClick: function(calEvent, jsEvent, view) {
calEvent.title = 'hoge';
$('#calendar').fullCalendar('updateEvent', calEvent);
}
}



とりあえず、これはかなりよさげ。