I am making this project in ASP.NET MVC 5.
I made something people like to call multipleDayEvents which displays like this
Now when I make one of those events range from 31st of March - 4th of April or anywhere that it jumps a month. it creates 2 events only on the client side. One that does exactly what I want, from 31st to 4th, but the other one acts like an allDay event, spanning from 31st of march to 4th of Mei. so a month too far.
It looks like this:
this is the code of the eventSources where I think the problem lies. But I have the full code available in this jsfiddle
eventSources: [
{
events: function (start, end, timezone, callback) {
$.ajax({
type: "POST",
url: '@Url.Action("List/medewerker_melding")',
data: "", //Hier kan eventueel de userID komen van de gebruiker die ingelogt is.
//completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object word hier gemaakt
var obj = doc; //.net returned json gewikkeld in "doc"
$.each(doc, function (index, obj) { //voor elke event in de database, push event in de kalender
var start = new Date(obj.start);
var end = new Date(obj.end);
var diff = (Date.parse(end) - Date.parse(start)); // end - start returns difference in milliseconds
var days = diff / 1000 / 60 / 60 / 24; // get days
var days = (Math.round(days) + 1);
if (days > 1 && obj.allDay == false) {
obj.isMultipleDays = true;
var addDays = 0;
MultipleDayEventStart = [];
MultipleDayEventEnd = [];
//Create multiple days
for (i = 1; i <= days; i++) {
var tmpDate = new Date();
tmpDate.setTime(start.getTime());
tmpDate.setDate(start.getDate() + addDays);
start.setDate(start.getDate() + addDays);
var tmpDate2 = new Date();
tmpDate2.setTime(end.getTime());
tmpDate2.setDate(tmpDate.getDate());
tmpDate = tmpDate.toString('yyyy-MM-dd HH:mm:ss');
tmpDate2 = tmpDate2.toString('yyyy-MM-dd HH:mm:ss');
MultipleDayEventStart[i - 1] = tmpDate;
MultipleDayEventEnd[i - 1] = tmpDate2;
AllMultipleDayEventsStart.push([obj.id, MultipleDayEventStart]);
AllMultipleDayEventsEnd.push([obj.id, MultipleDayEventEnd]);
addDays = 1;
};
} if (!obj.isMultipleDays) {
events.push({
id: obj.id,
title: obj.title + ", " + obj.meldingOmsch,
start: obj.start,
end: obj.end,
desc: obj.desc,
user: obj.user,
melding: obj.meldingID,
allDay: obj.allDay,
color: color
});
} else {
for (d = 0; d < days; d++) {
events.push({
id: obj.id,
title: obj.title + ", " + obj.meldingOmsch,
start: MultipleDayEventStart[d],
end: MultipleDayEventEnd[d],
desc: obj.desc,
user: obj.user,
melding: obj.meldingID,
allDay: obj.allDay,
color: color,
isMultipleDays: true,
day: d
});
}
}
console.log('-----------------EVENTS-----------------')
console.log(events);
});
callback(events);
$('#calendar').fullCalendar('renderEvent', events, true);
}
});
}
},
{
url: '../../Scripts/Feestdagen.js',
desc: 'feestdag',
color: 'green',
allDay: true,
}
],
This code simply checks how long an event lasts. if it's longer than 1 day, e.g. 4 days. it starts looping and adding 1 day to the start date and storing that date in an array untill 4 days have been added. That looks something like this: {start:2018-03-14, start:2018-03-15, start:2018-03-16, start:2018-03-17}. then loops the event.push, creating 4 events with the same ID's but selecting the corrosponding dates from the array. as you can see below.
Though the first item on the list has an end date of 2018-05-01 where it should be 2018-04-01.
The issue does not lie in the controller since the dates of the event in the database are correct, and there aren't 2 events created.
Also when I check the server output, the dates are correct
{
"id": 96,
"title": "K. Keesen",
"desc": null,
"start": "2018-03-31 08:30:00",
"end": "2018-04-04 17:00:00",
"user": 15,
"meldingOmsch": "spoedlijn",
"meldingID": 12,
"allDay": false,
"isMultipleDays": false
}
the way a user creates an event is by clicking on a date, then a bootstrap modal opens with a form inside then when pressed on submit, it fires this script:
$('#eventModal #save').on('click', function () {
var start = $('#eventModal #startDate').val();
var end = $('#eventModal #endDate').val();
var diff = new Date(Date.parse(end) - Date.parse(start)); // end - start returns difference in milliseconds
var days = diff / 1000 / 60 / 60 / 24; // get days
if ($('#eventModal #start').val() == ($('#eventModal #end').val()) && days == 0) {
alert("Een event kan niet beginnen en eindigen op de zelfde tijd!");
return false;
} else {
$('#eventModal .meldingForm').submit();
}
})
this script simply checks if someone hasn't tried to make an event that ranges from the same date to the same time (e.g 24th march 8:30 -> 24th march 8:30(this will produce an error))
Thanks
