Question

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

我实例化它与开始日期的方式不同，它在日历视图中显示得很好，但是由于某种原因，我每次获取clientEvents时都无法理解，甚至以为我没有更改它，但在事件中却得到了null结束日期！

PS：仅出于“良心”的缘故，我必须添加...我正在使用旧版本的Google chrome（v 57.0.2987.133 64位）和旧的ubuntu版本（Linux Mint 18.1 Serena）< / p>

这让我发疯了！谢谢！

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

我想出了解决问题的方法，在这里我将予以答复，因为我在互联网上找不到任何解决方法或对该问题进行进一步的分析...。

我没有检查我的问题，以确定它是否与以下事实有关：我错误地设置了活动的结束时间，并且日历未给我有关该问题的任何错误或其他任何错误，但是如果您再走我走的那条路我可以告诉你：

检查是否正确创建了结束时间（这可能是我的真正错误，我在getAgendaWorktime函数中使用setHours而不是getHours，该函数将最终值设为null。我在以下示例中对其进行了更正，但请在小提琴中错误地显示forceEventDuration属性的用法）；
将“ forceEventDuration”参数设置为“ true”（这将强制始终填充“ end”属性，这使我很容易在我的代码中使用，因为我始终可以等待服装的“ .format（）”方法中的字符串） ;

出于种种原因，fullcalendar.io有时未设置事件结束日期，每当评估事件结束时间时，这都会给我带来麻烦（好吧，我可以解决这个问题，但是我对为什么它使我感到困惑结果（如果没有），并且answare是错误的代码）。使用“ forceEventDuration：true”，fullcalendar每次给我结束时间，因此我发现我使用的输入法设置了错误的结束日期，也给了我机会进行更正。

相关链接：

日历参数文档https://fullcalendar.io/docs/forceEventDuration
纠正的小提琴https://jsfiddle.net/gjrfox05/

我希望这个答案对像我一样在fullcalendar.io上的新手有帮助。

小提琴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 结束日期为 null。

我刚刚从数据库（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 }})

  },

它对我有用

即使事件全天为假，只要事件未更改，FullCalendar结束日期都为空

2 个答案: