Fullcalendar does not render (using eventRender) - php

Question

I'd like to color events according to database. I use eventRender. Here is the whole code:
$(document).ready(function() {
var date = new Date();
var calendar = $('#calendar').fullCalendar({
header:
{
left: 'prev,next ',
center: 'title',
right: 'today'
},
selectable: true,
selectHelper: true,
fixedWeekCount: false,
allDayDefault: true,
editable: true,
events: "http://localhost/calendar_directory/calendar_db_connect.php",
eventRender: function (event, element, view)
{
if (event.confirmed == 0)
{
event.color = "#FFB999";
}
else
{
event.color = "#528881";
}
},
select: function(start, end) {
var title;
var beforeToday = false;
var check = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
if(check < today)
{
beforeToday = true;
}
else
{
title = prompt('Event Title:');
}
if (title && !beforeToday)
{
var start = $.fullCalendar.formatDate(start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json)
{
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event, jsEvent, view)
{
//set the values and open the modal
$("#eventInfo").html(event.description);
$("#eventLink").attr('href', event.url);
$("#eventContent").dialog({ modal: true, title: event.title });
},
eventDrop: function(event, delta)
{
var check = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD");
if(check < today) {
alert('Select an other start time, after today!');
}
else
{
var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
}
},
eventResize: function(event)
{
var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD");
var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD");
$.ajax(
{
url: 'http://localhost/calendar_directory/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(event)
{
var decision = confirm("Do you really want to confirm that?");
if (decision)
{
$.ajax(
{
url: "http://localhost/calendar_directory/confirm_events.php",
data: "&id=" + event.id,
type: "POST",
success: function(json)
{
console.log("confirmed");
//event.backgroundColor = 'green';
//$('#calendar').fullCalendar( 'rerenderEvents' );
}
});
}
}
});
(Please ignore clickEvent for modal).
The problem is, that it does not change the color of the events for the first time (first load of the page). But when I drop/resize an event all events gets the right color.
Before drop
After drop
table structure:
id - int, PR
title - varchar
start -datetime
end -datetime
confirmed - int (can be 0 or 1) <- The color should be change according to this

Answer 1

The eventRender method runs after the corresponding CSS for the event has been created. Therefore changing the properties of the event which relate to formatting/rendering at this point in the process has no effect - they have already been processed.
Luckily, you also get the "element" parameter passed to you in the callback - this gives you access to the rendered HTML, which you can then manipulate.
Setting the "color" property of an event actually affects the background and border colours of the rendered element, so we can replace what you did with:
eventRender: function (event, element, view)
{
if (event.confirmed == 0)
{
element.css("background-color", "#FFB999");
element.css("border-color", "#FFB999");
}
else
{
element.css("background-color", "#528881");
element.css("border-color", "#528881");
}
}
This should have the desired effect. Arguably this is a bug/undesirable feature in fullCalendar - you'd want to still be able to manipulate the event's properties fully and expect them to take effect. On the other hand, getting the "element" parameter effectively gives you full control over the rendering of the event, more than you would just via setting the event's properties. If this method ran before the element was created, you wouldn't have access to the element, with all the extra power that gives you. So it's a trade-off, but it's worth understanding the internals in order to know what you can change, and when in the process you can do it.