Question

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

小提琴here - 按一天，然后在文本框中输入一个数字

fullcalendar“设置”如下：

 $(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时没有事件添加到日历中 - ＆gt ;边缘。

我在这里错过了一些明显的东西吗？

在Firefox中：

firefox

在IE中：

enter image description here

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对象取决于浏览器。 FF上的Date可以读取字符串，但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()中）。

在IE中，fullcalendar不会renderEvent（所有版本）

1 个答案: