FullCalendar Day Light Savings renders wrong day and time - asp.net-mvc-5

Question

Ive been having this issue for a couple of days now and its something i cant seem to get past, If i post a one day event anytime during British Summer Time then the event when it renders in FullCalendar shows as a Two day event and puts the date back one hour and also moves the day (please see images below), the SQL is how it should be and showing the correct datetime but the calendar renders incorrectly.
I think that the issue is that the Json is coming out as ASP.net datetime and not ISO8601, I have tried all i can to change this but im new to .net and MVC so i just cant wrap my head around what to do.
I cant post a link to the picture of the event rendered as i dont have enough rep....
Pic of the data coming out in the object -
JsonObject
DB shot of the correct DateTime in SQL -
SQL DateTime
Heres how this setup is working for our MCV5 / FullCalendar project
Model -
public int Id { get; set; }
//Auto Populate
public string Subject { get; set; }
public string Description { get; set; }
public DateTime? StartTime { get; set; }
public DateTime? EndTime { get; set; }
public bool? AllDay { get; set; }
public bool? isAMLeave { get; set; }
public bool? isPMLeave { get; set; }
public string ETADType { get; set; }
public string ETADSubType { get; set; }
[ForeignKey("AssignedRole")]
public int SelectRole { get; set; }
public bool? AllRoles { get; set; }
public int StaffID { get; set; }
public int EventStatus { get; set; }
/*Approval Details*/
public int? ApporovedId { get; set; }
public DateTime? ApprovedDate { get; set; }
public DateTime EventDate { get; set; }
/*soft audit*/
public double Duration { get; set; }
public string EventAction { get; set; }
public virtual AssignedRoles AssignedRole { get; set; }
}
JsonResult -
public JsonResult GetDiaryEventsDivOne()
{
if (User.IsInRole("Global Admin"))
{
var date = new Date(jsonDate);
var _DivisionOneList = from e in db.DiaryEvent
join lt in db.EventStatus on e.EventStatus equals lt.Id
join t in db.ETAD_EventTypes on e.ETADType equals t.ETADID.ToString()
join st in db.ETAD_EventSubType on e.ETADSubType equals st.ETADSubID.ToString()
join sid in db.AssignedRoles on e.StaffID equals sid.UserID
join tid in db.Teams on sid.TeamId equals tid.TeamID
join div in db.Divisions on sid.DivisionId equals div.DivisionID
join sd in db.SubDivisions on sid.SubDivisionId equals sd.SubDivisionID
join sp in db.JobRoles on sid.JobRoleID equals sp.JobRoleID
where div.DivisionID == 1
select new
{
id = e.Id,
title = e.Subject,
description = e.Description,
start = e.StartTime,
end = e.EndTime,
etad = t.ETADDescription.ToString(),
etadsub = st.Description.ToString(),
color = t.Colours.HexCode,
user = sid.StaffProfiles.Fullname,
jobtitle = sp.JobTitle.ToString(),
allroles = e.AllRoles,
division = div.DivisionName,
subdivision = sd.SubDivisionName,
allDay = false
};
var rows = _DivisionOneList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
And finally heres my JS
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [
source1,
source2
],
timezone: 'Europe/London',
defaultView: 'month',
editable: false,
contentHeight: 700,
selectable: true,
eventClick: function (event, jsEvent, view) {
$("#startTime").html(moment(event.start).format('DD-MM-YYYY HH:mm'));
$("#endTime").html(moment(event.end).format('DD-MM-YYYY HH:mm'));
$('#modalTitle').html(event.title);
$('#user').text(event.user);
$('#modalBody').text(event.description);
$('#etad').html(event.etad);
$('#etadsub').html(event.etadsub);
$('#fullCalModal').modal('show');
$("#removeBtn").click(function () {
$.ajax({
type: 'POST',
url: "/BookingTwo/DeleteEvent",
data: {
"id": event.id
},
success: function () {
$('#calendar').fullCalendar('removeEvents', event.id);
$('#fullCalModal').modal('hide');
},
statusCode: {
202: function (reponose) {
$('#calendar').fullCalendar('refetchEvents');
$('#alert').addClass('alert alert-success').removeClass('alert-warning');
$("#alert").removeClass("hidden");
$("P").replaceWith("Success - Event Deleted")
$("#alert").fadeTo(5000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
},
409: function (reponse) {
$('#calendar').fullCalendar('refetchEvents');
$("#alert").removeClass("hidden");
$("P").replaceWith("Event already actioned.")
$("#alert").fadeTo(5000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
},
400: function (reponse) {
$('#calendar').fullCalendar('refetchEvents');
$("#alert").removeClass("hidden");
$("P").replaceWith("Access Denied - Not your leave request.")
$("#alert").fadeTo(5000, 500).slideUp(500, function () {
$('#alert').addClass("hidden");
})
}
}
});
});
},

Answer 1

Ive fixed the issue by setting
TimeZone; 'local'
I thought i had already set this in the paramaters but i had put Europe/London
For anyone having the same issue please look at your timezone settings in your JS for FullCalendar.