Asked by:
Using Full Calendar in ASP MVC

Question
-
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>}
Monday, October 29, 2018 2:23 PM
All replies
-
User1520731567 posted
Hi neil.balram,
Are there any error messages?
As I can see in your code,I think there is no problem with your code.
Please pay attention to:
1.url: "/Home/GetEvents/" note that the URL should not be mistaken.
2.
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
make sure your source from back end is right.
3.
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
what's your model?Does your field correspond to your model?
4.reference package missing:
@section scripts{ <!-- Full Calendar --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print" /> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script> <script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script> <script type="text/javascript"> . . . </script> }
Add some breakpoints on your back end and open F12 developer tool on your front end to check your code.
Best Regards.
Yuki Tao
Tuesday, October 30, 2018 10:17 AM -
User927521983 posted
Hi Yuki Tao,
The error message being shown on the screen is "Failed" in a dialog box.
It seems like the code is not reading from the database into the AJAX method.
I am getting this error below when I run the javascript console in the browser:
TypeError: fullcalendar_1 is undefined[Learn More] scheduler.js:389:1
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:389:1
__webpack_require__
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:35:12
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:1997:27
__webpack_require__
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:35:12
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:3942:28
__webpack_require__
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:35:12
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:3901:1
__webpack_require__
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:35:12
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:78:18
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:16:18
webpackUniversalModuleDefinition
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:12:114
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:6:11
TypeError: i is undefined[Learn More] scheduler.min.js:6:1763
jQuery.Deferred exception: $(...).tooltip is not a function @http://localhost:50281/Scripts/customJavaScript.js:3:37
mightThrow@http://localhost:50281/Scripts/jquery-3.3.1.js:3534:21
resolve/</process<@http://localhost:50281/Scripts/jquery-3.3.1.js:3602:12
undefinedTuesday, October 30, 2018 12:20 PM -
User1520731567 posted
Hi neil.balram,
neil.balram
TypeError: fullcalendar_1 is undefined[Learn More] scheduler.js:389:1
<anonymous>
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.js:389:1
__webpack_require__According to your error messages,It seems that there are many problems with reference packages.
And some I can't understand clearly,such as:
fullcalendar_1 is undefined,i is undefined.
Please try to involve my reference packages:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print" /> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script> <script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script> <script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
And please follow my steps to check your code.
And there is an example,you could refer to:
https://www.c-sharpcorner.com/article/asp-net-mvc5-full-calendar-jquery-plugin/
Best Regards.
Yuki Tao
Wednesday, October 31, 2018 2:09 AM