locked
Using Full Calendar in ASP MVC RRS feed

  • 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">&times;</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
    undefined

    Tuesday, 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