FullCalendar のカスタマイズ
カレンダーを作成するのに便利なjQueryのプラグイン「FullCalendar」を使用する際に行ったカスタマイズのメモ書きです。
FullCalendar
使用したのは、fullcalendarのver 1.5.3です。
ラベルの変更
|
64 65 66 67 |
monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], dayNames: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], dayNamesShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], |
|
64 65 66 67 |
monthNames: ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'], monthNamesShort: ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'], dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'], dayNamesShort: ['日','月','火','水','木','金','土'], |
時刻の表記を変更（Month-view）
|
57 58 59 |
timeFormat: { // for event elements '': 'h(:mm)t' // default }, |
|
57 58 59 |
timeFormat: { // for event elements '': 'H:mm' // default }, |
時刻の表記を変更（Week-view, Day-view）
|
2809 2810 2811 2812 |
axisFormat: 'h(:mm)tt', timeFormat: { agenda: 'h:mm{ - h:mm}' }, |
|
2809 2810 2811 2812 |
axisFormat: 'H:mm', timeFormat: { agenda: 'H:mm{ - H:mm}' }, |
timeFormatで指定できる書式は、1554行目辺りに記述があるのでそこを参照
|
1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 |
var dateFormatters = { s : function(d) { return d.getSeconds() }, ss : function(d) { return zeroPad(d.getSeconds()) }, m : function(d) { return d.getMinutes() }, mm : function(d) { return zeroPad(d.getMinutes()) }, h : function(d) { return d.getHours() % 12 || 12 }, hh : function(d) { return zeroPad(d.getHours() % 12 || 12) }, H : function(d) { return d.getHours() }, HH : function(d) { return zeroPad(d.getHours()) }, d : function(d) { return d.getDate() }, dd : function(d) { return zeroPad(d.getDate()) }, ddd : function(d,o) { return o.dayNamesShort[d.getDay()] }, dddd: function(d,o) { return o.dayNames[d.getDay()] }, M : function(d) { return d.getMonth() + 1 }, MM : function(d) { return zeroPad(d.getMonth() + 1) }, MMM : function(d,o) { return o.monthNamesShort[d.getMonth()] }, MMMM: function(d,o) { return o.monthNames[d.getMonth()] }, yy : function(d) { return (d.getFullYear()+'').substring(2) }, yyyy: function(d) { return d.getFullYear() }, t : function(d) { return d.getHours() < 12 ? 'a' : 'p' }, tt : function(d) { return d.getHours() < 12 ? 'am' : 'pm' }, T : function(d) { return d.getHours() < 12 ? 'A' : 'P' }, TT : function(d) { return d.getHours() < 12 ? 'AM' : 'PM' }, u : function(d) { return formatDate(d, "yyyy-MM-dd'T'HH:mm:ss'Z'") }, S : function(d) { var date = d.getDate(); if (date > 10 && date < 20) { return 'th'; } return ['st', 'nd', 'rd'][date%10-1] || 'th'; } }; |
ダブルクリックを取得できるようにする
|
4530 4531 4532 4533 4534 4535 4536 4537 4538 4539 4540 4541 4542 4543 4544 4545 4546 4547 4548 4549 |
// attaches eventClick, eventMouseover, eventMouseout function eventElementHandlers(event, eventElement) { eventElement .click(function(ev) { if (!eventElement.hasClass('ui-draggable-dragging') && !eventElement.hasClass('ui-resizable-resizing')) { return trigger('eventClick', this, event, ev); } }) .hover( function(ev) { trigger('eventMouseover', this, event, ev); }, function(ev) { trigger('eventMouseout', this, event, ev); } ); // TODO: don't fire eventMouseover/eventMouseout *while* dragging is occuring (on subject element) // TODO: same for resizing } |
|
4350 4351 4352 4353 4354 4355 4356 4357 4358 4359 4360 4361 4362 4363 4364 4365 4366 4367 4368 4369 4370 4371 4372 4373 4374 |
// attaches eventClick, eventMouseover, eventMouseout function eventElementHandlers(event, eventElement) { eventElement .click(function(ev) { if (!eventElement.hasClass('ui-draggable-dragging') && !eventElement.hasClass('ui-resizable-resizing')) { return trigger('eventClick', this, event, ev); } }) .dblclick( function(ev) { return trigger('eventDblClick', this, event, ev); } ) .hover( function(ev) { trigger('eventMouseover', this, event, ev); }, function(ev) { trigger('eventMouseout', this, event, ev); } ); // TODO: don't fire eventMouseover/eventMouseout *while* dragging is occuring (on subject element) // TODO: same for resizing } |
使い方
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$('#calendar').fullCalendar({ eventDblClick: function(calEvent, jsEvent, view) { alert('Event: ' + calEvent.title); alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); alert('View: ' + view.name); // change the border color just for fun $(this).css('border-color', 'red'); } }); |
カレンダーのイベントをダブルクリックした際に処理を実行させることができる。
イベントをJSONで読み込む
全イベントデータを一気に読み込むのであれば、eventsにイベントデータの(json形式)のファイル名を指定すればいいだけ。
（詳しくは、demosの中のjson.htmlを参照)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#calendar').fullCalendar({ editable: true, events: "json-events.php", eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' daysn' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); |
でも、上記の方法ではイベントデータが１年分／２年分と増えていくと重くなる。
なのでviewの切り替わり時に必要なイベントデータだけ取得するようにする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$('#calendar').fullCalendar({ editable: true, viewDisplay: function(view) { $.ajax({ url: "json-events.php", dataType: 'json', type:"post", data: { "start": view.start.toString(), "end": view.end.toString(), }, success: function(EventSource) { $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', EventSource); } }); }, eventDrop: function(event, delta) { alert(event.title + ' was moved ' + delta + ' daysn' + '(should probably update your database)'); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); |
json-events.phpでは、受け取ったstart,endの値をつかって必要なデータだけをjsonで出力するようにしておく。
