javascript - fullcalendar 在 IE 中不渲染事件(所有版本)

Question

我正在使用 fullcalendar渲染一些事件。

fiddle here - 按一天并在文本框中输入一个数字

完整日历“设置”如下:

 $(document).ready(function () {
    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        header: false,
        defaultView: 'basicWeek',
        height: 300,
        firstDay: 1,
        columnFormat: 'ddd D/MM',
        dayClick: function (date, jsEvent, view) {
            if (date > new Date()) {
                $('#lateralert').show();
                setInterval(function () { $('#lateralert').hide(); }, 4000);
            } else {
                $('#AddEventModal').modal('show');
                var modal = $('#AddEventModal');
                document.getElementById('hiddendate').value = date.toString();
                modal.find('.modal-title').text((moment(date).format('ddd D/MM')));
            }
        },
        events: [
            {
                title: '3',
                start: '2015-04-13',
                backgroundColor: '#e74c3c',
                borderColor: '#e74c3c'
            },
            {
                title: '4,5',
                start: '2015-04-13',
                backgroundColor: '#3498db',
                borderColor: '#3498db'

            },
            {
                title: '2',
                start: '2015-04-13',
                backgroundColor: '#95a5a6',
                borderColor: '#95a5a6'
            }
        ]
        // put your options and callbacks here
    });

});

我通过一个表单提交这些事件，我在其中捕获提交并添加事件。

 $(document).ready(function () {
    $('#event_frm').on('submit', function (e) {
        e.preventDefault();

        var form = document.getElementById('event_frm');

        var date = form.elements["hiddendate"].value;
        var hours = form.elements["hours"].value;

        $('#calendar').fullCalendar('renderEvent',
        {
            title: hours,
            start: date,
            allDay: true,
            description: 'my desc'
        });

        window.hasMadeChanges = true;

        $('#discardchanges').prop('disabled', false);
    });
});

以上在 Firefox 中运行正常，我试过在 IE 中调试它，但没有错误，并且代码执行(根据调试器)，但在使用 IE 9 时没有事件添加到日历中 ->边缘。

我是不是漏掉了一些明显的东西？

在 Firefox 中:

在 IE 中:

Answer 1

好的，发现了两个问题并让它在 IE9 中工作。

全日历使用 momentjs对于与日期相关的所有内容。如果您将插入日期硬编码为片刻，您会注意到它在 IE 中有效。

$('#calendar').fullCalendar('renderEvent',{          
    title: hours,
    start: moment(),
    allDay: true,
    description: 'test'
});

所以我们知道您提供的开始日期有问题。马上包装它几乎可以工作:

var date = form.elements["hiddendate"].value;
$('#calendar').fullCalendar('renderEvent',{          
    title: hours,
    start: moment(date),
    allDay: true,
    description: 'test'
});

但是现在事件被添加到前一天。

如果您查看从何处获取该日期值:

document.getElementById('hiddendate').value = date.toString();

toString 不应用于存储日期。我实际上不确定它的用途(docs 使用过一次但从不谈论它)。

并且在您的控制台中，您会在执行 moment(date) 时注意到弃用警告。警告说它返回到 Date 构造函数，因为它无法解析字符串。这就是 IE 的不同之处，因为 Date 对象依赖于浏览器。 FF 上的Date 可以读取字符串，但IE 上的Date 不能。

相反，使用 moment.format() 生成一个 moment 可以读取的字符串。所以:

document.getElementById('hiddendate').value = date.format();
//...
$('#calendar').fullCalendar('renderEvent',{          
    title: "a",
    start: moment(date),
    allDay: true,
    description: 'test'
});

这JSFiddle现在应该可以工作了。

此外，行:

if (date > new Date()) {

应该是

if (date.isAfter(moment())) {

令我惊讶的是，前者甚至可以工作，但不支持它可能无法完美工作。不要混合日期类型(除非您将 Date 包装在 moment() 中)。