Image may be NSFW.
Clik here to view.
Clik here to view.
DEMO
before
after
使用したのは、fullcalendarのver 1.5.3です。
ラベルの変更
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
[javascript title="fullcalendar.js before" firstline="64"]
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'],
[/javascript]
[javascript title="fullcalendar.js after" firstline="64"]
monthNames: ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'],
monthNamesShort: ['１月','２月','３月','４月','５月','６月','７月','８月','９月','１０月','１１月','１２月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
[/javascript]
時刻の表記を変更（Month-view）
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
[javascript title="fullcalendar.js before" firstline="57"] timeFormat: { // for event elements '': 'h(:mm)t' // default }, [/javascript] [javascript title="fullcalendar.js after" firstline="57"] timeFormat: { // for event elements '': 'H:mm' // default }, [/javascript] 時刻の表記を変更（Week-view, Day-view） Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
[javascript title="fullcalendar.js before" firstline="2809"]
axisFormat: 'h(:mm)tt',
timeFormat: {
agenda: 'h:mm{ - h:mm}'
},
[/javascript]
[javascript title="fullcalendar.js after" firstline="2809"]
axisFormat: 'H:mm',
timeFormat: {
agenda: 'H:mm{ - H:mm}'
},
[/javascript]
timeFormatで指定できる書式は、1554行目辺りに記述があるのでそこを参照
[javascript title="fullcalendar.js dateFormatters" firstline="1554"]
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';
}
};
[/javascript]
ダブルクリックを取得できるようにする
[javascript title="fullcalendar.js before" firstline="4350"]
// 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
}
[/javascript]
[javascript title="fullcalendar.js after" firstline="4350" highlight="4359,4360,4361,4362,4363"]
// 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
}
[/javascript]
使い方
[javascript title="index.html eventDblClick"]
$('#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');
}
});
[/javascript]
カレンダーのイベントをダブルクリックした際に処理を実行させることができる。
イベントをJSONで読み込む
全イベントデータを一気に読み込むのであれば、eventsにイベントデータの(json形式)のファイル名を指定すればいいだけ。
（詳しくは、demosの中のjson.htmlを参照)
[javascript title="json.html before" highlight="3"]
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
[/javascript]
でも、上記の方法ではイベントデータが１年分／２年分と増えていくと重くなる。
なのでviewの切り替わり時に必要なイベントデータだけ取得するようにする。
[javascript title="json.html after" highlight="3,4-16,17"]
$('#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 + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
[/javascript]
json-events.phpでは、受け取ったstart,endの値をつかって必要なデータだけをjsonで出力するようにしておく。
その他のFllCalendarの記事
