fullcalendar 在 IE 中不渲染事件（所有版本）

Question

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

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

完整日历"setup"如下：

 $(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 中运行。

Fullcalendar 使用 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 对象依赖于浏览器。 Date 在 FF 上可以读取字符串，但在 IE 上 Date 不能。

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

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() 中）。

fullcalendar 在 IE 中不渲染事件（所有版本）

fullcalendar does not renderEvent in IE (All versions)

javascript

internet-explorer

fullcalendar