I need to run some Javascript code to reload the calendar when the user either clicks, day/week/month buttons. Is there any callback like dayButtonClicked()
or something?
BUG happening:
When I first load the calendar. The initial view looks fine mine initially loads day. As soon as I load another view such as week. Every single entry is duplicated and showing both sources of data. If I then click back and forward between day and month again the data is back to normal. What is happening is the removeEventSource
is not being called when it first loads the new view after clicking from day to week. have you seen this happen before?
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var loadUrl = "menu_booking.php?ne=1&calsub=1";
var lastView;
var fullSource = "../fullcalendar/json-events.php?idc=<?= $sClient ?>&v=long";
var liteSource = "../fullcalendar/json-events.php?idc=<?= $sClient ?>";
$('#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',
firstDay: 1,
//editable: true,
selectable: true,
allDaySlot: false,
firstHour: 7,
viewDisplay: function(view) {
if (lastView == undefined) { lastView = 'firstRun'; }
if (view.name != lastView ) {
if (view.name == 'agendaWeek') {
$('#calendar').fullCalendar( 'removeEventSource', fullSource );
$('#calendar').fullCalendar( 'removeEventSource', liteSource );
$('#calendar').fullCalendar( 'addEventSource', fullSource );
}
if (view.name == 'agendaDay') {
$('#calendar').fullCalendar( 'removeEventSource', fullSource );
$('#calendar').fullCalendar( 'removeEventSource', liteSource );
$('#calendar').fullCalendar( 'addEventSource', liteSource );
}
if (view.name == 'month') {
$('#calendar').fullCalendar( 'removeEventSource', fullSource );
$('#calendar').fullCalendar( 'removeEventSource', liteSource );
$('#calendar').fullCalendar( 'addEventSource', fullSource );
}
lastView = view.name;
}
},
timeFormat: { // for event elements
agendaDay: '',
agendaWeek: '',
month: '',
'': 'h(:mm)t' // default
},
});
//$('#calendar').limitEvents(2);
});
</script>
I've even copied your code in exactly how you do it because I thought there was an issue with my code; even if I change to this:
//VIEW CHANGE - ALSO ADDS INITIAL SOURCES PER DAY VIEW
viewDisplay: function(view) {
$('#calendar').fullCalendar( 'removeEventSource', fullSource );
$('#calendar').fullCalendar( 'removeEventSource', liteSource );
$('#calendar').fullCalendar( 'addEventSource', fullSource ); }
},
It still double loads data when I move from the default loaded view to another. I'm starting to think it is surely a bug in FullCalendar
. Its driving me nuts
EDIT 2: MY GOD. I can't believe it finally works!
I have no idea why but I needed to swap around addEventSource
and removeEventSource
it now looks something like this:
viewDisplay: function(view) {
if (lastView == undefined) { lastView = 'firstRun'; }
//alert("viewname: "+ view.name + "lastView: " + lastView);
if (view.name != lastView ) {
if (view.name == 'agendaWeek') {
$('#calendar').fullCalendar( 'addEventSource', shortSource );
$('#calendar').fullCalendar( 'removeEventSource', longSource );
$('#calendar').fullCalendar( 'removeEventSource', shortSource );
}
if (view.name == 'agendaDay') {
//alert("in day: add litesource");
$('#calendar').fullCalendar( 'addEventSource', longSource );
$('#calendar').fullCalendar( 'removeEventSource', longSource );
$('#calendar').fullCalendar( 'removeEventSource', shortSource );
}
if (view.name == 'month') {
//alert("in month: Delete litesource");
$('#calendar').fullCalendar( 'addEventSource', shortSource );
$('#calendar').fullCalendar( 'removeEventSource', longSource );
$('#calendar').fullCalendar( 'removeEventSource', shortSource );
}
lastView = view.name;
}
},
Usually clicking on the view button will fire this event
Be careful because this event will also fire if you change days on dayViews or Months in month view but you by pass that by storing a last variable
jQuery..
.
viewDisplay: function(view) { ** }
.
Replace the ** with either
.fullCalendar( 'refetchEvents' )
It will just get your feed again. like a refresh and update any changes that might have occurred http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/
or you could switch sources
$('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=Complex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=Basic' );
But to find out which buttons was clicked you would need to do this
eventClick: function( event, jsEvent, view )
{ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With