user3302358 user3302358 - 7 months ago 140
Javascript Question

fullcalendar stop showing events from controller mvc 4

I have a problem with simple event show in fullcalendar. First time when I use this code, this calendar shows me my events from database, after two days I must change something and now it's completly broken. Thanks for your help!

This is my Calendar.js

$(document).ready(function () {

GetEvents();

});


function GetEvents()
{

$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'month',

editable: false,

dataType: "json",

events: {
url: '/Calendar/MountLoad',
type: 'POST',
data: {
},
error: function () {
alert('there was an error while fetching events!');
},

success: function () {

}
}

});

};


And this is my calendar controller

public class CalendarController : Controller
{
private MountManager mountManager;
private EmployeeController employeeManager;

public CalendarController()
{
this.mountManager = new MountManager();
this.employeeManager = new EmployeeController();
}
public JsonResult MountLoad()
{
var events = mountManager.MountList();
var eventList = from e in events
select new
{
id = e.Id,
place = e.Place,
description = e.Description,
name = e.Name,
DateFrom = e.DateFrom.ToString("s"),
DateTo = e.DateTo.ToString("s")

};

return Json(eventList, JsonRequestBehavior.AllowGet);
}

public ActionResult Index()
{
return View();
}

}

Answer

I would suggest you to change your ajax and use .map to map your data with fullcalendar as below:

function GetEvents()
{
    $.ajax({
        dataType: "json",
        contentType: "application/json",
        data: "{}",
        url: "/Calendar/MountLoad",
        dataType: "json",
        success: function (data) {
            $('#calendar').fullCalendar({
                theme: false,
                header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: ''
                },
                defaultView: 'month',
                editable: false,
                lang: 'en-IN',
                eventLimit: 1,
                eventLimitText: 'More',
                weekMode: 'liquid',
                events: $.map(data, function (item, i) {//This is where you need to take care
                       var event = new Object();
                       event.start = moment(item.DateFrom).utc();
                       event.end = moment(item.DateTo).utc();
                       event.title = item.name;
                       event.brief = item.description;
                       event.place = item.place;
                       event.id=item.id;
                       return event;
                }),

            });

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#cal_error").text(errorThrown); //Handle Error
        }
   });
}

Note : You need to add moment.js and refer it for future full calendar support

Refer this question if you have any doubts

Comments