javascript - Load Events in FullCalendar using Asp.Net mvc4 - Stack Overflow

admin管理员组

文章数量:1335560

I'm trying to load data into an FullCalendar, using Json. But i can't load the data: The controller:

ppublic ActionResult GetEvents()
    {
        List<Models.Events> events = new List<Models.Events>()
    {     
        new Models.Events("Fremvising","2013-01-11T14:08:00Z", "2013-01-11T16:09:00Z", false),
        new Models.Events("Fremvising","2013-01-12T15:09:00Z", "2013-01-11T17:10:00Z", false),
        new Models.Events("Fremvising","2013-01-13T16:10:00Z", "2013-01-11T18:11:00Z", false),
        new Models.Events("Fremvising","2013-01-14T17:11:00Z", "2013-01-11T19:12:00Z", false),
        new Models.Events("Fremvising","2013-01-15T18:12:00Z", "2013-01-11T20:13:00Z", false),                                   
        new Models.Events("Fremvising","2013-01-16T19:13:00Z", "2013-01-11T21:14:00Z", false)

    };
        return Json(events, JsonRequestBehavior.AllowGet);
    }

And the javascript:

$(document).ready(function () {


    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function () {

        // create an Event Object (/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay',
            height: 650,
            // url:,
        }, events: [
            $.getJSON("@Url.Action("GetEvents")", function (locationsArray) {
                $.each(locationsArray, function (index, location) {

                    title  : location.title;
                    start: location.start;
                    end: location.end;
                    allDay: location.editable; // will make the time show

                });
            })
             ],

        allDaySlot: false,
        //minTime: 10,
        //maxTime: 21,
        dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag',
       'Torsdag', 'Fredag', 'Lørdag'],
        dayNamesShort: ['Søn', 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør'],
        editable: true,
        defaultView: 'agendaWeek',
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }
    });
});
$('#tabs').tabs({
    show: function (event, ui) {
        $('#calendar').fullCalendar('render');
    }
});

For some reason it doesnt get the json result. The Json request

0: {title:Fremvising, start:2013-01-11T14:08:00Z, end:2013-01-11T16:09:00Z, editable:false}
1: {title:Fremvising, start:2013-01-12T15:09:00Z, end:2013-01-11T17:10:00Z, editable:false}
2: {title:Fremvising, start:2013-01-13T16:10:00Z, end:2013-01-11T18:11:00Z, editable:false}
3: {title:Fremvising, start:2013-01-14T17:11:00Z, end:2013-01-11T19:12:00Z, editable:false}
4: {title:Fremvising, start:2013-01-15T18:12:00Z, end:2013-01-11T20:13:00Z, editable:false}
5: {title:Fremvising, start:2013-01-16T19:13:00Z, end:2013-01-11T21:14:00Z, editable:false}

I'm trying to load data into an FullCalendar, using Json. But i can't load the data: The controller:

ppublic ActionResult GetEvents()
    {
        List<Models.Events> events = new List<Models.Events>()
    {     
        new Models.Events("Fremvising","2013-01-11T14:08:00Z", "2013-01-11T16:09:00Z", false),
        new Models.Events("Fremvising","2013-01-12T15:09:00Z", "2013-01-11T17:10:00Z", false),
        new Models.Events("Fremvising","2013-01-13T16:10:00Z", "2013-01-11T18:11:00Z", false),
        new Models.Events("Fremvising","2013-01-14T17:11:00Z", "2013-01-11T19:12:00Z", false),
        new Models.Events("Fremvising","2013-01-15T18:12:00Z", "2013-01-11T20:13:00Z", false),                                   
        new Models.Events("Fremvising","2013-01-16T19:13:00Z", "2013-01-11T21:14:00Z", false)

    };
        return Json(events, JsonRequestBehavior.AllowGet);
    }

And the javascript:

$(document).ready(function () {


    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function () {

        // create an Event Object (http://arshaw./fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay',
            height: 650,
            // url:,
        }, events: [
            $.getJSON("@Url.Action("GetEvents")", function (locationsArray) {
                $.each(locationsArray, function (index, location) {

                    title  : location.title;
                    start: location.start;
                    end: location.end;
                    allDay: location.editable; // will make the time show

                });
            })
             ],

        allDaySlot: false,
        //minTime: 10,
        //maxTime: 21,
        dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag',
       'Torsdag', 'Fredag', 'Lørdag'],
        dayNamesShort: ['Søn', 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør'],
        editable: true,
        defaultView: 'agendaWeek',
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw./fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }
    });
});
$('#tabs').tabs({
    show: function (event, ui) {
        $('#calendar').fullCalendar('render');
    }
});

For some reason it doesnt get the json result. The Json request

0: {title:Fremvising, start:2013-01-11T14:08:00Z, end:2013-01-11T16:09:00Z, editable:false}
1: {title:Fremvising, start:2013-01-12T15:09:00Z, end:2013-01-11T17:10:00Z, editable:false}
2: {title:Fremvising, start:2013-01-13T16:10:00Z, end:2013-01-11T18:11:00Z, editable:false}
3: {title:Fremvising, start:2013-01-14T17:11:00Z, end:2013-01-11T19:12:00Z, editable:false}
4: {title:Fremvising, start:2013-01-15T18:12:00Z, end:2013-01-11T20:13:00Z, editable:false}
5: {title:Fremvising, start:2013-01-16T19:13:00Z, end:2013-01-11T21:14:00Z, editable:false}

• javascript
• asp-mvc-4
• fullcalendar

Share Improve this question Follow edited Jan 13, 2013 at 0:12 mortenstarck asked Jan 12, 2013 at 22:48 mortenstarckmortenstarck 2,80388 gold badges4747 silver badges7979 bronze badges 4

• Not getting any json request. – mortenstarck Commented Jan 12, 2013 at 23:26
• You don't see an AJAX request being triggered in FireBug? Can you see some errors in the Console? Can you see some errors in the Network tab? Things like 404 errors in the Network tab of FireBug is probably the first thing you should be looking for when analyzing those kind of problems. – Darin Dimitrov Commented Jan 12, 2013 at 23:27
• My mistake. Im getting the json request but do not put the data into the calendar – mortenstarck Commented Jan 12, 2013 at 23:33
• I have updated my javascript file. i can now get the Json and receive it, but what i can't see is why it isn't loading the data. – mortenstarck Commented Jan 13, 2013 at 0:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You have incorrectly defined the events property of your FullCalendar. You have assigned it to a javascript array but that's incorrect because your data is ing from the server. You should set it to an anonymous function. Also you seem to be triggering an AJAX request to the server but inside the success callback you are doing absolutely nothing with the results other than looping through them but you never pass them to the FullCalendar. Here's the correct way to define the events property:

events: function (start, end, callback) {
    $.getJSON("@Url.Action("GetEvents")", function (locationsArray) {
        var result = $(locationsArray).map(function () {
            return {
                title: this.title,
                start: this.start,
                end: this.end,
                allDay: this.editable
            };
        }).toArray();
        callback(result);
    });
},

Notice how we are performing a transformation over the result ing from the server (which wouldn't have been necessary of course if you had used view models) and then we are calling the callback property with this transformed resultset.

Alright and here's a step by step guide:

1. Create a new ASP.NET MVC 4 application using the Internet Application Template

2. Modify HomeController to look like this:

   public class HomeController : Controller
   {
       public ActionResult Index()
       {
           return View();
       }
   
       public ActionResult GetEvents()
       {
           var events = new[]
           {     
               new { title = "Fremvising", start = "2013-01-11T14:08:00Z", end = "2013-01-11T16:09:00Z", editable = false },
               new { title = "Fremvising", start = "2013-01-12T15:09:00Z", end = "2013-01-11T17:10:00Z", editable = false },
               new { title = "Fremvising", start = "2013-01-13T16:10:00Z", end = "2013-01-11T18:11:00Z", editable = false },
               new { title = "Fremvising", start = "2013-01-14T17:11:00Z", end = "2013-01-11T19:12:00Z", editable = false },
               new { title = "Fremvising", start = "2013-01-15T18:12:00Z", end = "2013-01-11T20:13:00Z", editable = false },                                   
               new { title = "Fremvising", start = "2013-01-16T19:13:00Z", end = "2013-01-11T21:14:00Z", editable = false }
           };
           return Json(events, JsonRequestBehavior.AllowGet);
       }
   }
   

3. Download FullCalendar and put it into the Scripts folder

4. Modify ~/Views/Shared/_Layout.cshtml to look like this:

   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="utf-8" />
           <title>@ViewBag.Title - My ASP.NET MVC Application</title>
           @RenderSection("styles", required: false)
       </head>
       <body>
           @RenderBody()
           @Scripts.Render("~/bundles/jquery")
           @RenderSection("scripts", required: false)
       </body>
   </html>
   

5. And ~/Views/Home/Index.cshtml like that:

   <div id="calendar"></div>
   
   @section styles {
       <link href="~/scripts/fullcalendar-1.5.4/fullcalendar/fullcalendar.css" rel="stylesheet" />
   }
   
   @section scripts {
       <script type="text/javascript" src="~/scripts/fullcalendar-1.5.4/fullcalendar/fullcalendar.js"></script>
       <script type="text/javascript">
           $('#calendar').fullCalendar({
               header: {
                   left: 'prev,next today',
                   center: 'title',
                   right: 'agendaWeek,agendaDay',
                   height: 650,
               }, 
               events: function (start, end, callback) {
                   $.getJSON("@Url.Action("GetEvents")", function (locationsArray) {
                       var result = $(locationsArray).map(function () {
                           return {
                               title: this.title,
                               start: this.start,
                               end: this.end,
                               allDay: this.editable
                           };
                       }).toArray();
                       callback(result);
                   });
               },
   
               allDaySlot: false,
               dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
               dayNamesShort: ['Søn', 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør'],
               editable: true,
               defaultView: 'agendaWeek',
               droppable: true,
               drop: function (date, allDay) { // this function is called when something is dropped
   
                   // retrieve the dropped element's stored Event Object
                   var originalEventObject = $(this).data('eventObject');
   
                   // we need to copy it, so that multiple events don't have a reference to the same object
                   var copiedEventObject = $.extend({}, originalEventObject);
   
                   // assign it the date that was reported
                   copiedEventObject.start = date;
                   copiedEventObject.allDay = allDay;
   
                   // render the event on the calendar
                   // the last `true` argument determines if the event "sticks" (http://arshaw./fullcalendar/docs/event_rendering/renderEvent/)
                   $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
   
                   // is the "remove after drop" checkbox checked?
                   if ($('#drop-remove').is(':checked')) {
                       // if so, remove the element from the "Draggable Events" list
                       $(this).remove();
                   }
   
               }
           });
       </script>
   }
   

本文标签： javascriptLoad Events in FullCalendar using AspNet mvc4Stack Overflow