Object property goes to null when OnClick is fired

Question

I have made a javascript function that creates a calendar. To create a calendar I use fullcalendar. In the code you can see i make a ajax call to get the events that the calendar should contain. The problem that occures is that one of its property becomes null after I clicked on the event. the property "end" becomes null after I clicked an event to see its details. What confuses me is that when I console.log "calendarevents" within the eventclick method "end" is not null, but when i console log "calEvent" and look at its source (which shows the source array) and look in to the right item, it does say that "end" is null. I'm totally confused by this. I hope you guys see what I do wrong and can help me:) thanks you in advance!

 <script>
    $(document).ready(function () {
        var events = [];            
        $.ajax({
            type: "GET",
            url: "@Url.Action("GetEvents", "Agenda")",
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            success: function (data) {
                console.log(" Start Pushing " + data);
                $.each(data, function (i, v) {
                    events.push({
                        title: v.Subject, //string
                        description: v.Description, //string
                        start: moment(v.StartDateTime), //datetime
                        end: moment(v.EndDateTime), //datetime
                        color: v.ThemeColor, //string
                        allDay: v.IsFullDay //bool
                    });
                })
                GenerateCalender(events);
            },
            error: function (error) {
                alert('failed' + error.getAllResponseHeaders());
            }
        })

        function GenerateCalender(calendarevents) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                aspectRatio: 1.5,
                defaultDate: new Date(),
                timeFormat: 'HH:mm',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: calendarevents,
                eventClick: function (calEvent, jsEvent, view) {                        
                    $('#myModal #eventTitle').text(calEvent.title);
                    var $description = $('<div/>');
                    $description.append($('<p/>').html('<b>Starttijd: </b>' + calEvent.start.format("DD-MMM-YYYY HH:mm ")));      
                    if (calEvent.end != null) {
                        $description.append($('<p/>').html('<b>Eindtijd: </b>' + calEvent.end.format("DD-MMM-YYYY HH:mm ")));
                    }
                    $description.append($('<p/>').html('<b>Beschrijving: </b>' + calEvent.description));
                    $('#myModal #pDetails').empty().html($description);

                    $('#myModal').modal();
                }
            })
        }
    })
</script>

Please show the values of the start and end properties, taken from both the calendarevents array and the calEvent object returned by fullcanlendar. Is the end value that becomes null a valid moment input and later that start? — traktor
@traktor53 start and end are both datetime object, to clearify start = startdate of an event and end is end date of an event. both start en end are dates, both are valid moment inputs. I have added an image where you can see the object and values. I've added an image to the post with the output of the calendarevents and of the calevent. — Diceble
@SølveTornøe what do you exactly mean. because you can just add some dummydata and debug if I'm right. you don't have to do the ajax call to test this. — Diceble
@Diceble please read "how to create a complete and minimal verifiable example" available on the help center. Questions could be closed if you expect readers to make up test data. You may find this article on stack snippets useful to begin with. — traktor

traktor traktor · Accepted Answer · 2017-11-30T00:38:33

Start and end values may include a time. The test data shown supplies the exactly the same date for start and end.

Documentation for eventObject states that end is optional, but otherwise "becomes" a moment object.

My deduction (because a minimal test case was not supplied) would be that end date/time values which are the same as or earlier than start are treated as not being supplied, and that when not supplied, missing end values are converted to null. This would explain the conversion of end to null when it is the same as start.

Object property goes to null when OnClick is fired

1 Answers