FullCalendar.js not showing events in IE 10 and FF 21.0 - php

Question

I created a calendar with FullCalendar.js and it's working fine on Chrome (v.27) but not working on IE 10 e FF 21.0. Here the code that renders the events:
<?php
$user_selected = (isset($_GET['id'])) ? $_GET['id'] : $_SESSION[$pre_ssn.'userid'];
// [...]
$get_dati_calendar = mysql_query("SELECT * FROM calendario_fonderia WHERE user_id = $user_selected ");
$eventi = '[';
while ($calendar = mysql_fetch_array($get_dati_calendar)) {
$coloring = ($calendar['eur_gr'] != '') ? ", className: 'fc-event-done'" : '';
$dati_cal = ($calendar['eur_gr'] != '') ? $calendar['grammi'].' gr.\n'.$calendar['eur_gr'].' €/gr' : $calendar['grammi'].' gr.' ;
$eventi .= "{ title: '".$dati_cal."', start: new Date('".$calendar['data']."'), allDay: true ".$coloring." },";
}
echo ($eventi != '[') ? substr($eventi, 0, -1)."]\n" : "[]\n";
?>
And this is the full code (with at the end the php renderer):
jQuery(document).ready(function() {
//datepicker
jQuery('#datepicker').datepicker();
// tabbed widget
jQuery('.tabbedwidget').tabs();
function shortAjax(file, mode, dati){
var datiEx = jQuery.ajax({
type: "POST",
url: file+".php",
data: "mode="+mode+"&"+dati,
async: false}).responseText;
return datiEx;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var eventi_gg = Array();
var calendar = jQuery('#calendar').fullCalendar({
firstDay: 1, // Start with Monday
header: {
left: 'prev,next today',
center: 'title',
right: false
},
buttonText: {
prev: '«',
next: '»',
prevYear: ' << ',
nextYear: ' >> ',
today: 'today'
},
monthNamesShort: [ "Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Sett", "Ott", "Nov", "Dic"],
monthNames: [ "Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
dayNames : ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"],
dayNamesShort : ["Dom", "Lun", "Mar", "Mer", "Giov", "Ven", "Sab", "Dom"],
allDayText: "GIORNATA",
titleFormat:{month:"MMMM yyyy",week:"d [ yyyy]{ '—'d MMM[ MMM] yyyy}",day:"dddd d MMM yyyy"},
columnFormat:{month:"ddd",week:"dddd d/M",day:"dddd d MMMM"},
buttonText: {
prev: '«',
next: '»',
prevYear: ' << ',
nextYear: ' >> ',
today: 'oggi'
},
selectable: false,
editable: false,
loading: function(bool) {
if (bool) $('#loader_layer').show();
else $('#loader_layer').hide();
},
dayClick: function(start) {
jQuery(this).append("<div style='text-align:center; position:relative; top:50%;' id='load-calendar'><img src='images/loaders/loader10-1.gif' /></div>");
var oggi = date.getFullYear()+'-'+ ('0' + (date.getMonth()+1)).slice(-2)+'-'+('0' + date.getDate()).slice(-2);
data_click = jQuery.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
data_click_short = jQuery.fullCalendar.formatDate(start, "yyyy-MM-dd");
giorno_click = jQuery.fullCalendar.formatDate(start, "dd/MM");
var numEventi = shortAjax("handler_fonderia", "check_event", "data="+data_click_short);
//console.log(data_click_short+'-'+oggi);
//&& data_click_short == oggi
if(numEventi == 0 ){
jQuery.alerts.dialogClass = 'alert-danger';
jQuery.alerts.okButton = 'Prosegui';
var deposito = shortAjax("handler_fonderia", "get_deposito", "id=");
jPrompt('Grammi:', '', 'Aggiunta Grammi al '+giorno_click, function(grammi) {
if(grammi){
grammi = parseFloat(grammi);
//jAlert(grammi+' - '+deposito);/*
if(grammi <= deposito){
jQuery.alerts.okButton = 'Confermo';
jQuery.alerts.cancelButton = 'No, Annulla';
jConfirm('Stai per inserire <b>'+grammi+'</b> grammi per il giorno <b>'+giorno_click+'</b>.<br>Questi dati non possono più essere modificati. Confermi?', 'CONFERMA GRAMMI', function(conferma){
if(conferma){
var creaEvento = shortAjax("handler_fonderia", "add_grammi", "grammi="+grammi+"&data="+data_click+"&day="+data_click_short);
if(creaEvento == "true"){
jQuery('#load-calendar').remove();
var resdeposito = parseFloat(jQuery('#depositoVal').val()-grammi);
var cumdeposito = parseFloat(jQuery('#depositoCum').val());
var totdeposito = parseFloat(cumdeposito+grammi);
jQuery('#totDeposito').val('Deposito: '+resdeposito.toFixed(1)+' gr.');
jQuery('#totVenduto').val('Venduto: '+totdeposito.toFixed(1)+' gr.');
calendar.fullCalendar('renderEvent', {
title: grammi + " gr.",
start: start
}, true);
}
}
});
}else{
jQuery('#load-calendar').remove();
jQuery.alerts.okButton = 'OK';
jAlert('I grammi che vuoi inserire sono superiori al deposito.<br>Richiedere un nuovo deposito o inserire una grammatura inferiore.', 'Errore');
}
}jQuery('#load-calendar').remove();
});
}else if(numEventi == 0 && data_click_short < oggi){
jQuery('#load-calendar').remove();
jQuery.jGrowl("E' possibile inserire i grammi solo nel giorno corrente.", {header: '<span style="color:red; font-size:12px;">Attenzione</span>', life:8000});
}
},
editable: false,
events:
<?php
$get_dati_calendar = mysql_query("SELECT * FROM calendario_fonderia WHERE user_id = $user_selected ");
$eventi = '[';
while ($calendar = mysql_fetch_array($get_dati_calendar)) {
$coloring = ($calendar['eur_gr'] != '') ? ", className: 'fc-event-done'" : '';
$dati_cal = ($calendar['eur_gr'] != '') ? $calendar['grammi'].' gr.\n'.$calendar['eur_gr'].' €/gr' : $calendar['grammi'].' gr.' ;
$eventi .= "{ title: '".$dati_cal."', start: new Date('".$calendar['data']."'), allDay: true ".$coloring." },";
}
echo ($eventi != '[') ? substr($eventi, 0, -1)."]\n" : "[]\n";
?>
});
function effectFadeIn() {
jQuery('#ptDeposito').fadeOut(500).fadeIn(500, effectFadeOut());
}
function effectFadeOut() {
jQuery('#ptDeposito').fadeIn(500).fadeOut(500, effectFadeIn());
}
<?= $effect_on ?>
});
Event gets written on the DB and everything works fine on that side.
Unfortunately I can't give you a link for this. I'll try to JSfiddle it.
EDIT
I tried to see if the problem was the PHP echoing so I tried writing directly the event in JS like this:
events: [{ title : 'A',
start : new Date('2013-07-09 00:00:00'),
allDay : true, className: 'fc-event-done' }]
And it doesn't work, therefore the issue must be something else...

Answer 1

Look firefox error console. $user_selected nis not defined, php sent warning and sql error and break json code. Remember add json headers. And remember:
events:[,className: 'fc-event-done' ...
Is not correct, you need objects not arrays:
events: {className:'foo', etc...
Make an array in while and show with join(',') for correct concatenation.
Try it:
events:
<?php
$user_selected = 1; // ???
$get_dati_calendar = mysql_query("SELECT * FROM calendario_fonderia WHERE user_id = $user_selected ");
$data = array();
while ($calendar = mysql_fetch_array($get_dati_calendar)) {
$data[] = "{
title : '".(($calendar['eur_gr']) ? $calendar['grammi'].' gr.\n'.$calendar['eur_gr'].' €/gr' : $calendar['grammi'].' gr.')."',
start : new Date('".$calendar['data']."'),
allDay : true
".($calendar['eur_gr'] ? ", className: 'fc-event-done'" : "")."
}";
}
echo implode(',' $data);
?>
}
Or change for an array:
echo '['.implode(',' $data).']';

Answer 2

I'v logged in FF console new Date('2013-07-09 00:00:00') and get this error Date {Invalid Date}. If you try convert your date to ISO 8601 format, something like this 2013-07-09T19:10:00-04:00, all should work fine.
UPD: why you try not return response in json format from server side?

Answer 3

Try to load data in this datetime format "yyyy-MM-dd HH:mm:ss" it helps me. I'm using FullCaneldar in ASP.Net MVC C# project...