User927521983 posted
Hi,
I have done my research to try implementing the full calendar plugin to link to my SQL Database Backend. However, the data is not being read into the calendar successful.
Please see my code below. Looking for advice asap.
Controller
------------------------------------
[HttpGet]
public async Task<JsonResult> GetEvents()
{
using (MrsEntities dc = new MrsEntities())
{
var events = await dc.MeetingDetails.ToListAsync();
//return Json(events, JsonRequestBehavior.AllowGet);
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
-------------------------------------------------------
HTML Page with JavaScript code:
<div id="calender"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents/",
success: function (Data) {
$.each(Data, function (i, v) {
events.push({
title: v.MeetingName,
description: v.RequestedBy,
start: moment(v.StartDate),
end: v.EndDate != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
});
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378000',
events: events,
eventClick: function (calEvent, jsEvent, view) {
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
});
</script>
}
