FullCalendar end date null whenever event is not changed even though allday false

Question

Does anybody know why is the end date null on those "allday=false" events?

Fiddle Sample: https://jsfiddle.net/L1g0z3jd/

I instantiate it differently from the start date, it shows just fine in the calendar view, but for some reason I can't understand whenever i get clientEvents, even thought i have not changed it, I got a null in the event end date!

PS: Just for the sake of "conscience" I must add ... I'm using and old version of google chrome (v 57.0.2987.133 64-bit) and an old ubuntu version (Linux Mint 18.1 Serena)

Its getting me crazy! Thanks!

HTML Code:

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

Javascript Code:

$(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

I figured out how to solve the question, I will reply to it here for I have not found any workaround or further analysis of the problem in the internet ....

I didn't review my problem to determine if it was specific related to the fact that I was setting the event's end time incorrectly and the calendar wasn't giving me any errors on the issue or anything else, but if you're gowing by the same road i went i can tell you:

1. Check to see if the end time is been created corretly (that seams to be my real mistaken, I was using setHours instead getHours in the getAgendaWorktime function, which turned the final value to be null. I corrected it in the sample below, but let it incorrectly in the fiddle to show the use of the forceEventDuration attribute);
2. Set "forceEventDuration" parameter to "true" (that forces the "end" attribute to always be filled easying me up in my code for I can always awaits for an string from ".format()" method of the attibute);

for meny reasons fullcalendar.io some times does not sets the event end date and this was getting me problems whenever avaluating the event end time (Ok, I could work around it but I was intrigged for why does it was getting me those results when it sould not, and the answare was a buged code). With "forceEventDuration: true" fullcalendar gave me the end time every time therefor i could find out that the input method i was using was seting the end date incorrectly and gave me the chance to correct it as well.

Links related:

• Calendar parameter documentation https://fullcalendar.io/docs/forceEventDuration
• Corrected Fiddle https://jsfiddle.net/gjrfox05/

I hope this answer could be of some help for newcomers at fullcalendar.io as me.

Fiddle Javascript part corrected sample:

$(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

By default FullCalendar end date null when event end_date = start_date.

I Just pass another fiend with same date from database (Django View).

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

And check in 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 }})

  },

ITS WORK FOR ME