Diceble
Diceble

Reputation: 807

Object property goes to null when OnClick is fired

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> 

output from <code>console.log()</code>

Upvotes: 1

Views: 246

Answers (1)

traktor
traktor

Reputation: 19301

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.

Upvotes: 1

Related Questions