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>
<div class="md-6">
<div style="border:solid 2px red;">
<div id='calendar'></div>
</div>
</div>
<div class="md-6">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed magna est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum elit et lacus pellentesque aliquet. Aliquam eu orci sed urna ultricies sollicitudin. Nulla posuere, mauris eget facilisis fermentum, purus enim lobortis magna, sit amet malesuada mi metus in libero. Etiam rutrum orci quis mi scelerisque hendrerit. Proin sed lacus eros. Vestibulum eu lorem at felis cursus efficitur at ac est.
</div><div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed magna est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum elit et lacus pellentesque aliquet. Aliquam eu orci sed urna ultricies sollicitudin. Nulla posuere, mauris eget facilisis fermentum, purus enim lobortis magna, sit amet malesuada mi metus in libero. Etiam rutrum orci quis mi scelerisque hendrerit. Proin sed lacus eros. Vestibulum eu lorem at felis cursus efficitur at ac est.
</div>
</div>
CSS
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.md-6{width:50%;float:left;}
.content{width:100%;float:left;background:rgba(0,0,0,0.1);padding:15px;}
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);
}
});
});