Reputation: 807
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>
Upvotes: 1
Views: 246
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