populating fullcalendar using SQL Server

Question

I have seen several questions around this topic on here, but can't seem to get my fullcalendar to display properly using the provided methods, so I was hoping someone could give me a hand with fixing my issue.

My JSON feed seems to populate correctly, although I see some saying that it only works with single quote, and others only work with double quotes. (possibly an issue with the double quotes surrounding the whole feed?)

"[{"title":"change1","start":"2016-10-17T10:00:00","end":"2016-10-17T12:00:00","allDay":false},{"title":"change2","start":"2016-10-18T10:00:00","end":"2016-10-18T12:00:00","allDay":true},{"title":"change3","start":"2016-10-19T10:00:00","end":"2016-10-19T12:00:00","allDay":false}]"

calendar.aspx.cs:

public class Event
        {
            public string title;
            public string start;
            public string end;
            public bool allDay;
        }
        [WebMethod]
        public static string GetEvents()
        {
            var events = new List<Event>();
            var sqlQuery = "SELECT title, starttime, endtime, allDay FROM [DeploymentDashboard].[dbo].[ChangeCalendar]";

            using (var sqlConnection = new SqlConnection("Data Source=*server*;Initial Catalog=DeploymentDashboard;Integrated Security=True;"))
            {
                using (var cmd = new SqlCommand(sqlQuery, sqlConnection))
                {
                    sqlConnection.Open();
                    using (var reader = cmd.ExecuteReader())
                    {
                        if (reader.HasRows)
                        {
                            while (reader.Read())
                            {
                                events.Add(new Event()
                                {
                                    start = DateTime.Parse(reader["starttime"].ToString()).ToString("s"),
                                    end = DateTime.Parse(reader["endtime"].ToString()).ToString("s"),
                                    title = reader["title"].ToString(),
                                    allDay = (bool)reader["allDay"]
                                });
                            }
                        }
                    }
                    sqlConnection.Close();
                }
            }

        var theSerializer = new JavaScriptSerializer();
        return theSerializer.Serialize(events);
    }

calendar.aspx:

<script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "calendar.aspx/GetEvents", 
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function (data) {
            $('#calendar2').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: data.d
            });
        });
    });
</script>

Answer 1

Try this:

var eventsArray = [{"title":"change1","start":"2016-10-17T10:00:00","end":"2016-10-17T12:00:00","allDay":false},{"title":"change2","start":"2016-10-18T10:00:00","end":"2016-10-18T12:00:00","allDay":true},{"title":"change3","start":"2016-10-19T10:00:00","end":"2016-10-19T12:00:00","allDay":false}]

$('#calendar2').fullCalendar({
  events: eventsArray
});

Answer 2

This should fix it.

events: JSON.parse(data.d); 

This helped: https://www.w3schools.com/js/js_json_parse.asp

Imagine we received this text from a web server:

'{ "name":"John", "age":30, "city":"New York"}'

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');