我用FullCalendar.js创建了一个日历,它在 Chrome (v.27) 上运行良好,但在 IE 10 e FF 21.0 上运行不正常。这里呈现事件的代码:
<?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";
?>
这是完整的代码(最后是 php 渲染器):
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 <a href="deposito.php">nuovo deposito</a> 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 ?>
});
事件被写入数据库,并且在那一侧一切正常。不幸的是,我不能给你这个链接。我会尝试 JSfiddle 它。
编辑
我试图查看问题是否是 PHP 回显所以我尝试直接在 JS 中编写事件,如下所示:
events: [{ title : 'A',
start : new Date('2013-07-09 00:00:00'),
allDay : true, className: 'fc-event-done' }]
而且它不起作用,因此问题一定是别的......