FullCalendar.js未在IE 10和FF 21.0中显示事件

时间:2013-07-06 00:16:21

标签: php jquery fullcalendar

我使用FullCalendar.js创建了一个日历,它在Chrome上运行良好(第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: '&laquo;',
            next: '&raquo;',
            prevYear: '&nbsp;&lt;&lt;&nbsp;',
            nextYear: '&nbsp;&gt;&gt;&nbsp;',
            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]{ '&#8212;'d MMM[ MMM] yyyy}",day:"dddd d MMM yyyy"},
        columnFormat:{month:"ddd",week:"dddd d/M",day:"dddd d MMMM"},
        buttonText: {
            prev: '&laquo;',
            next: '&raquo;',
            prevYear: '&nbsp;&lt;&lt;&nbsp;',
            nextYear: '&nbsp;&gt;&gt;&nbsp;',
            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 ?>

});

事件写在数据库上,一切正常。 不幸的是我无法给你一个链接。我会试着把它搞定。

修改

我试着看看问题是否是PHP回应所以我试着在JS中直接写这个事件:

events: [{ title   : 'A', 
                        start   : new Date('2013-07-09 00:00:00'), 
                        allDay  : true, className: 'fc-event-done' }]

它不起作用,因此问题必须是别的......

3 个答案:

答案 0 :(得分:1)

看看firefox错误控制台。 $ user_selected nis未定义,php发送警告和sql错误并打破json代码。记得添加json标头。请记住:

events:[,className: 'fc-event-done' ...

不正确,你需要的是对象而不是数组:

events: {className:'foo', etc... 

在while中创建一个数组,并使用join(',')显示正确的连接。

试一试:

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);
    ?>
}

或更改数组:

echo '['.implode(',' $data).']';

答案 1 :(得分:1)

我已登录FF控制台new Date('2013-07-09 00:00:00')并收到此错误Date {Invalid Date}。如果您尝试将日期转换为ISO 8601格式,例如此类2013-07-09T19:10:00-04:00,则所有内容都可以正常使用。

UPD:你为什么不尝试从服务器端以json格式返回响应?

答案 2 :(得分:0)

尝试以此日期时间格式加载数据“yyyy-MM-dd HH:mm:ss”它可以帮助我。我在ASP.Net MVC C#项目中使用FullCaneldar ......