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

Question

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

小提琴样本：https://jsfiddle.net/L1g0z3jd/

我实例化它与开始日期不同，它在日历视图中显示得很好，但由于某种原因，每当我得到 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。我在下面的示例中更正了它，但让它在小提琴中错误地显示 forceEventDuration 属性的使用）；
2. 将“forceEventDuration”参数设置为“true”（这会强制始终填充“end”属性，让我在代码中轻松自如，因为我总是可以等待来自属性的“.format()”方法的字符串） ;

出于多种原因，fullcalendar.io 有时不会设置活动结束日期，这让我在评估活动结束时间时遇到了问题（好吧，我可以解决它，但我很想知道为什么它会让我得到那些结果不正确，并且答案是错误的代码）。使用 "forceEventDuration: true" fullcalendar 每次都会给我结束时间，因此我可以发现我使用的输入法设置的结束日期不正确，并让我有机会更正它。

相关链接：

• 日历参数文档https://fullcalendar.io/docs/forceEventDuration
• 更正小提琴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);
}

Answer 2

默认情况下，当事件 end_date = start_date 时，FullCalendar 结束日期为空。

我只是从数据库（Django 视图）中传递了另一个具有相同日期的恶魔。

   event_sub_arr['end'] = end_date
    event_sub_arr['end_same_date'] = end_date

然后签入 javaScript

  eventClick: function(info) {
    var modal = document.getElementById('DeleteEventModal')
    getEventDeleteUrl(info.event.id)
    getEventUpdateUrl(info.event.id)
    modal.style.display = 'block'
    calendar.unselect()

    var start = info.event.start
    var end_same_date = info.event.end_same_date
    var end = info.event.end || end_same_date


    $("#event_id_name").text(info.event.title)
    $("#event_id_start").text(moment(start).format('h:mm:ss a, MMMM Do YYYY'))
    $("#event_id_end").text(moment(end).format('h:mm:ss a, MMMM Do YYYY'))
    console.log(info.event.start)
    console.log(info.event.end)
    console.log({{ event_data|safe }})

  },

它适合我