FullCalendar: Event with tooltips/custom event attributes
HTML
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
JavaScript
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var events_array = [
{
title: 'Test1',
start: new Date(2012, 8, 20),
tip: 'Personal tip 1'},
{
title: 'Test2',
start: new Date(2012, 8, 21),
tip: 'Personal tip 2'}
];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: events_array,
eventRender: function(event, element) {
element.attr('title', event.tip);
},
select: function(start, end, jsEvent, view) {
// start contains the date you have selected
// end contains the end date.
// Caution: the end date is exclusive (new since v2).
var allDay = !start.hasTime && !end.hasTime;
alert(["Event Start date: " + moment(start).format(),
"Event End date: " + moment(end).format(),
"AllDay: " + allDay].join("\n"));
}
});
});