Issue getting events Full Calendar asp.net / c#

Question

First of all i would say i have tried many many sample here and other not getting success so posting here for suggestion.

I am using Full Calendar.

Here is the start:

$('#calendar')
     .fullCalendar({
         allDaySlot: false,
         customButtons: {
             reload: {
                 text: '+1 Year',
                 click: function() {
                     $('#calendar').fullCalendar('gotoDate', new Date(new Date().setFullYear(new Date().getFullYear() + 1)));
                 }
             }                           
         },     
         themeSystem: 'bootstrap4',
         defaultView: 'agendaWeek',
          eventClick: updateEvent,
          selectable: true,
          selectHelper: true,
         events: "JsonResponse.ashx", 
         and other attributes.....

The issue is the calendar is not showing events .

JsonResonse.ashx returns a string like :

[{id: '1029',title: 'mr 1',clientphone: '1234556654',clientemail: 'mr1@gmail.com',start:  '2018-05-21 10:00',end: '2018-05-21 11:45',allDay:false,description: 'New test on a new calender'},{id: '1030',title: 'mr 2',clientphone: '123456',clientemail: 'mr2@gmail.com',start:  '2018-05-25 09:00',end: '2018-05-25 11:45',allDay:false,description: 'i like pringles'}]

However on firefox i see it does not make the events some error saying :

SyntaxError: JSON.parse: expected property name or '}' at line 1 column 3 of the JSON data

So i take the and Replace events: "JsonResponse.ashx", with the returned string

 [{id: '1029',title: 'mr 1',clientphone: '1234556654',clientemail: 'mr1@gmail.com',start:  '2018-05-21 10:00',end: '2018-05-21 11:45',allDay:false,description: 'New test on a new calender'},{id: '1030',title: 'mr 2',clientphone: '123456',clientemail: 'mr2@gmail.com',start:  '2018-05-25 09:00',end: '2018-05-25 11:45',allDay:false,description: 'i like pringles'}]

CODE TO MAKE THE JSON RETURN:

 return "{" +
             "id: '" + cevent.id + "'," +
             "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
             "clientphone: '" + HttpContext.Current.Server.HtmlEncode(cevent.clientphone) + "'," +
             "clientemail: '" + HttpContext.Current.Server.HtmlEncode(cevent.clientemail) + "'," +
             "start:  '" + (cevent.start).ToString("yyyy-MM-dd HH:mm") + "'," +
             "end: '" + (cevent.end).ToString("yyyy-MM-dd HH:mm") + "'," +
             "allDay:" + allDay + "," +
             "description: '" + HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +
             "},";

Basically i combine all the events and then return.

just like that and it works fine and put events on the calendar . What am i doing wrong here?

Thank you

Answer 1

The json returned by JsonResponse.ashx handler is invalid. How are you generating the json? I suggest use NewtonSoft for serializing your Events list as json using JsonConvert.SerializeObject method

Here is the valid json that your ashx handler should return. Note the double quotes around property name and values.

[{
    "id": "1029",
    "title": "mr1",
    "clientphone": "1234556654",
    "clientemail": "mr1@gmail.com",
    "start": "2018-05-2110: 00",
    "end": "2018-05-2111: 45",
    "allDay": false,
    "description": "Newtestonanewcalender"
},
{
    "id": "1030",
    "title": "mr2",
    "clientphone": "123456",
    "clientemail": "mr2@gmail.com",
    "start": "2018-05-2509: 00",
    "end": "2018-05-2511: 45",
    "allDay": false,
    "description": "ilikepringles"
}]

Answer 2

Based on your updated question, you need to update the json generation code like this:

return "{" +
             "\"id\": \"" + cevent.id + "\"," +
             "\"title\": \"" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "\"," +
             "\"clientphone\": \"" + HttpContext.Current.Server.HtmlEncode(cevent.clientphone) + "\"," +
             "\"clientemail\": \"" + HttpContext.Current.Server.HtmlEncode(cevent.clientemail) + "\"," +
             "\"start\":  \"" + (cevent.start).ToString("yyyy-MM-dd HH:mm") + "\"," +
             "\"end\": \"" + (cevent.end).ToString("yyyy-MM-dd HH:mm") + "\"," +
             "\"allDay\":" + allDay + "," +
             "\"description\": \"" + HttpContext.Current.Server.HtmlEncode(cevent.description) + "\"" +
             "},";