Jquery FullCalender

I want to implement jquery fullcalender in my application getting the events from the db.

I have done it as follows:

 function calresult() {

            $.ajax({
                type: "POST",
                contentType: "application/json",
                data: "{}",
                url: "FullCalendar.asmx/GetAllEvent",
                dataType: "json",
                success: function (data) {
                    alert(data);
                    $('#fullcal').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        editable: true,
                        events: data.d
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    debugger;
                }
            });
        }

 $(document).ready(function () {
            calresult();
        });

 <div id="fullcal">
        </div>

 [WebMethod]
        public List<Events> GetAllEvent()
        {
            ClsEvent _objEvent = new ClsEvent();
            DataTable dt = new DataTable();
            dt = _objEvent.GetAllEvent();
            List<Events> lists = new List<Events>();
            if (dt.Rows.Count > 0)
            {
                foreach (DataRow dr in dt.Rows)
                {
                    var evt = new Events();
                    evt.Id = Convert.ToInt32(dr["ID"]);
                    evt.Title = Convert.ToString(dr["EventName"]);
                    evt.StartDate = Convert.ToDateTime(dr["HoldThroughfrom"]);
                    evt.EndDate = Convert.ToDateTime(dr["HoldThroughTo"]);
                    lists.Add(evt);
                }
            }
            return lists;


        }

But it is not showing anything. the webmethod is geting called and also getting the events from db correctly.

Can anyone help