javascript - FullCalendar 结束日期 null 只要事件未更改，即使 allday false

Question

有人知道为什么那些“allday=false”事件的结束日期为空吗？

fiddle 样本:https://jsfiddle.net/L1g0z3jd/

我以不同于开始日期的方式实例化它，它在日历 View 中显示得很好，但出于某种原因我无法理解每当我收到 clientEvents 时，即使我认为我没有更改它，我在事件中得到了一个 null结束日期!

PS:为了“良心”，我必须添加...我使用的是旧版本的谷歌浏览器(v 57.0.2987.133 64 位)和旧的 ubuntu 版本(Linux Mint 18.1 Serena)

这让我发疯!谢谢!

HTML代码:

<button onclick="javascript:getEvents()">Get Events</button>
<div id='calendar'></div>

Javascript 代码:

$(function() {
$('#calendar').fullCalendar({
    header: false,
    allDaySlot: false,
    visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
    editable: true,
    selectable: true,
    views: {
        settimana: {
            type: 'agenda',
            columnFormat: 'ddd',
            hiddenDays: []
        }
    },
    defaultView: 'settimana',
    defaultDate: $.fullCalendar.moment().startOf('week'),
    slotMinutes: 30,
    events: [
                $.fn.getAgendaWorktime(1, "08:00:00", 60),
                $.fn.getAgendaWorktime(2, "08:30:00", 120),
            ],
    select: function(startDate, endDate) {
        $('#calendar').fullCalendar('renderEvent', {
            title: 'free time',
            start: startDate.format(),
            end: endDate.format(),
            allDay: false
        });
    },
    eventClick: function(calEvent, jsEvent, view) {
        console.log(calEvent, jsEvent, view);
        if(doubleClick==calEvent._id){
            if (confirm('Delete it?')) {
                $('#calendar').fullCalendar('removeEvents',calEvent._id);
            }
            doubleClick = null;
        }else{
            doubleClick=calEvent._id;
        }
    },
});
});
function getEvents() {
    var e=0,err=false,$data = []
    $('#calendar').fullCalendar('clientEvents').forEach(periodo => {
        if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
            if (e==0) {
                err = true;
                e++;
                alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
            }
        } else {
            $data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
        }
    });
    alert($data);
}

jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
    var r = {
        allDay: false,
        title: 'free time',
        start: new Date('2000-01-02 '+$start),
        end: new Date('2000-01-02 '+$start)
    };
    r.start.setDate(r.start.getDate()+$dow);
    r.end.setDate(r.end.getDate()+$dow);
    r.end.setHours(r.end.setHours()+($elapsed*60));
    return(r);
}

Answer 1

我想出了如何解决这个问题，我会在这里回复它，因为我在互联网上没有找到任何解决方法或对问题的进一步分析....

我没有检查我的问题来确定它是否与我错误地设置事件的结束时间以及日历没有给我关于该问题或其他任何错误的事实有关，但是如果你如果我走的是同一条路，我可以告诉你:

1. 检查是否正确创建了结束时间(这确实是我的错误，我在 getAgendaWorktime 函数中使用 setHours 而不是 getHours，这将最终值变为 null。我在下面的示例中更正了它, 但让它错误地出现在 fiddle 中以显示 forceEventDuration 属性的使用);
2. 将“forceEventDuration”参数设置为“true”(这会强制始终填充“end”属性，这让我在代码中更容易，因为我总是可以等待来自属性的“.format()”方法的字符串) ;

出于多种原因，fullcalendar.io 有时不会设置事件结束日期，这让我在评估事件结束时间时遇到问题(好吧，我可以解决它，但我很感兴趣为什么它让我得到那些当它不存在时会产生结果，并且答案软件是一个错误代码)。使用“forceEventDuration: true”fullcalendar 每次都给我结束时间，因此我可以发现我使用的输入法设置的结束日期不正确，并让我有机会更正它。

相关链接:

• 日历参数文档 https://fullcalendar.io/docs/forceEventDuration
• 更正 fiddle https://jsfiddle.net/gjrfox05/

希望这个回答能对我这样的fullcalendar.io新手有所帮助。

Fiddle Javascript 部分更正示例:

$(function() {
$('#calendar').fullCalendar({
    header: false,
    allDaySlot: false,
    forceEventDuration: true,
    visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
    editable: true,
    selectable: true,
    views: {
        settimana: {
            type: 'agenda',
            columnFormat: 'ddd',
            hiddenDays: []
        }
    },
    defaultView: 'settimana',
    defaultDate: $.fullCalendar.moment().startOf('week'),
    slotMinutes: 30,
    events: [
                $.fn.getAgendaWorktime(1, "08:00:00", 60),
                $.fn.getAgendaWorktime(2, "08:30:00", 120),
            ],
    select: function(startDate, endDate) {
        $('#calendar').fullCalendar('renderEvent', {
            title: 'free time',
            start: startDate.format(),
            end: endDate.format(),
            allDay: false
        });
    },
    eventClick: function(calEvent, jsEvent, view) {
        console.log(calEvent, jsEvent, view);
        if(doubleClick==calEvent._id){
            if (confirm('Delete it?')) {
                $('#calendar').fullCalendar('removeEvents',calEvent._id);
            }
            doubleClick = null;
        }else{
            doubleClick=calEvent._id;
        }
    },
});
});
function getEvents() {
    var e=0,err=false,$data = []
    $('#calendar').fullCalendar('clientEvents').forEach(periodo => {
        if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
            if (e==0) {
                err = true;
                e++;
                alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
            }
        } else {
            $data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
        }
    });
    alert($data[0].fim);
}

jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
    var r = {
        allDay: false,
        title: 'free time',
        start: new Date('2000-01-02 '+$start),
        end: new Date('2000-01-02 '+$start)
    };
    r.start.setDate(r.start.getDate()+$dow);
    r.end.setDate(r.end.getDate()+$dow);
    r.end.setHours(r.end.getHours()+($elapsed*60));
    return(r);
}