FullCalendar does not load events

Question

I am using FullCalendar in my asp.net mvc application. It does not load events. I get a list of events on ajax call. Below is my code. What is wrong with him.?

 <div class="row"> <div class="col-lg-12"> <section class="panel"> <div class="panel-body"> <div id="calendar"></div> </div> </section> </div> </div> <script type="text/javascript"> jQuery.extend({ getValues: function (url) { var result = null; $.ajax({ url: url, type: 'get', dataType: 'json', async: false, success: function (data) { result = data; }, error: function (err) { alert(JSON.stringify(err)); } }); return result; } }); var jsonEvents = $.getValues('@Url.Action("GetEvents", "Booking")'); alert(jsonEvents); //var jsonEvents = [{ title: "Dhaval, (4,6), 6", start: "05/21/2016 1:05:00 PM" }, // { title: "Mohit, (2), 4", start: "05/21/2016 1:05:00 PM" }] $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'agendaWeek,agendaDay' }, allDay: true, defaultView: 'agendaWeek', events: jsonEvents//'@Url.Action("GetEvents", "Booking")' }); </script> 

** js in a comment is just a format. ** And GetEvents/Controller as follows:

 public Json GetEvents() { string query = "query to get events"; // columns in result table are: id, title, date try { SqlConnection connection = new SqlConnection("connectionString"); connection.Open(); SqlCommand command = new SqlCommand(query, connection); SqlDataReader events = command.ExecuteReader(); DataTable dt = new DataTable(); dt.Load(events); string result = DataTableToJSONWithStringBuilder(dt); connection.Close(); return Json(result, JsonRequestBehavior.AllowGet); } catch (Exception ex) { } } public string DataTableToJSONWithStringBuilder(DataTable table) { var JSONString = new StringBuilder(); if (table.Rows.Count > 0) { JSONString.Append("["); for (int i = 0; i < table.Rows.Count; i++) { JSONString.Append("{"); for (int j = 0; j < table.Columns.Count; j++) { if (j < table.Columns.Count - 1) { JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\","); } else if (j == table.Columns.Count - 1) { JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\""); } } if (i == table.Rows.Count - 1) { JSONString.Append("}"); } else { JSONString.Append("},"); } } JSONString.Append("]"); } return JSONString.ToString(); } 

This is the format I want. [{title: "John, (2,1), 6", start: "05/13/2016 12:00:00 AM"}, {title: "Olivia, (11,4), 6", start: "05/11/2016 12:00:00 AM"}]

Getting the following error while checking an item:
Failed to load the resource: the server responded with a status of 400 (failed request): http: localho ../ ABC / [% 7Btitle:% 22John,% 20 (4.6),% 206% 22, start:% 2205/21 / 2016% 201: 05: 00% 20PM% 22, end:% 2205/21/2016% 201: 30: 00% 20PM% 22% 7D,% 7Btitle:% 22Olivia,% 20 (2),% 204% 22, start:% 2205/21/2016% 201: 05: 00% 20PM% 22, end:% 2205/21/2016% 201: 30: 00% 20PM% 22% 7D] start = 2016? -05-15 & end = 2016-05-22 & _ = 1463885539445

here I commented on var jsonEvents = [...] . When I use predefined events, the calendar shows them perfectly. But when I call the server, an error occurs. FULLCALENDAR ONLY SHOWS EVENTS FROM A FILE MEMORED ON THE SERVER. BECAUSE THE DOCUMENTATION SHOWS ONLY A URL TO A FILE CONTAINING JSON DATA.

Help me. Thanks.

Answer 1

Your only true problem because of which your calendar does not appear is:

 defaultView: 'agendaweek', 

It should be

  defaultView: 'agendaWeek', 

Yes ... A capital letter ruined your hole.

And you don't need everyone else

 $("#calendar").fullCalendar(...) 

next to your main. hold only this (with capital W)

 $('#calendar').fullCalendar( { header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'agendaWeek', selectable: false, selectHelper: false, events: events }); 

EDIT

This is because your date format is incorrect. The default is MM / dd / YYYY. you are trying to set the date to month 13. And the reason you have multiple calendars is because you set it several times. Just do it once. You can see a working example here using json (I fixed dates). Just clear all your javascript and HTML so that they are as in the jsFiddle example, and then start adding your own things.

Answer 2

try

events: {url: '@ Url.Action ("GetEvents", "Booking")', enter: 'GET', ..}

instead

events: '@ Url.Action ("GetEvents", "Booking")'

Here is a complete reference to the properties of the event object: http://fullcalendar.io/docs/event_data/Event_Object/

Answer 3

try to follow

$ (document) .ready (function () {

  var sourceFullView = { url: '/Booking/GetEvents/' }; var CalLoading = true; $('#calendar').fullCalendar({ header: { left: '', right: '', center: 'prev,title,next', }, defaultView: 'month', editable: true, allDaySlot: false, selectable: true, slotMinutes: 15, droppable: true, events: '/Booking/GetEvents/' 

});

I'm not sure what you get in Json response from your request. so if you can try to extract the data using the Linq Entity Framework query, below is my sample code that might help you.

  public JsonResult GetEvents() { try { var eventsList = from ev in db.YourTableName select new { Id = ev.Id, Title = ev.Title, Date = ev.Date }; var rows = eventsList.ToArray(); return Json(rows, JsonRequestBehavior.AllowGet); } catch (Exception ex) { throw ex; } }