I'm trying to make a dynamic calendar with jQuery Fullcalendar, I want to display a different title on the events if they are on month, week or day view. I'm, trying with addEventSource
and removeEventSource
, but I can't get the event to get render. This is my code:
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
daySource = new Object();
daySource.title = 'MONTH'; // this should be string
daySource.start = new Date(y, m, d); // this should be date object
daySource.end = new Date(y, m, d);
var day =new Array();
day[0]= daySource;
monthSource = new Object();
monthSource.title = 'MONTH'; // this should be string
monthSource.start = new Date(y, m, d); // this should be date object
monthSource.end = new Date(y, m, d);
var month =new Array();
month[0]= monthSource;
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
columnFormat: {
month: 'ddd',
week: 'ddd d/M',
day: 'dddd d/M'
},
defaultView: 'agendaDay',
viewDisplay: function(view) {
if (lastView == undefined) { lastView = 'firstRun'; }
if (view.name != lastView ) {
if (view.name == 'agendaWeek') {
$('#calendar').fullCalendar( 'addEventSource', month );
$('#calendar').fullCalendar( 'removeEventSource', day );
$('#calendar').fullCalendar( 'removeEventSource', day );
$('#calendar').fullCalendar('renderEvents');
}
if (view.name == 'agendaDay') {
$('#calendar').fullCalendar( 'addEventSource', day );
$('#calendar').fullCalendar( 'removeEventSource', month );
$('#calendar').fullCalendar( 'removeEventSource', month );
$('#calendar').fullCalendar('renderEvents');
}
if (view.name == 'month') {
$('#calendar').fullCalendar( 'addEventSource', month );
$('#calendar').fullCalendar( 'removeEventSource', day );
$('#calendar').fullCalendar( 'removeEventSource', day );
$('#calendar').fullCalendar('renderEvents');
}
lastView = view.name;
}
},
timeFormat: { // for event elements
agendaDay: '',
agendaWeek: '',
month: '',
'': 'h(:mm)t' // default
},
}); $('#calendar').fullCalendar( 'addEventSource', month ); $('#calendar').fullCalendar('rerenderEvents');
});
First I don't know why the avents doesn't render, and then if the title will change depending on the view. I'll appreciate any help.