FullCalendar events from asp.net ASHX page not showing

Question

I am trying to add some events to fullCalendar using an ASHX page call using the following code.

Script page:

<script type="text/javascript"> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month, agendaWeek,agendaDay' }, events: 'FullCalendarEvents.ashx' }) }); </script> 

C # code:

 public class EventsData { public int id { get; set; } public string title { get; set; } public string start { get; set; } public string end { get; set; } public string url { get; set; } public int accountId { get; set; } } public class FullCalendarEvents : IHttpHandler { private static List<EventsData> testEventsData = new List<EventsData> { new EventsData {accountId = 0, title = "test 1", start = DateTime.Now.ToString("yyyy-MM-dd"), id=0}, new EventsData{ accountId = 1, title="test 2", start = DateTime.Now.AddHours(2).ToString("yyyy-MM-dd"), id=2} }; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json."; context.Response.Write(GetEventData()); } private string GetEventData() { List<EventsData> ed = testEventsData; StringBuilder sb = new StringBuilder(); sb.Append("["); foreach (var data in ed) { sb.Append("{"); sb.Append(string.Format("id: {0},", data.id)); sb.Append(string.Format("title:'{0}',", data.title)); sb.Append(string.Format("start: '{0}',", data.start)); sb.Append("allDay: false"); sb.Append("},"); } sb.Remove(sb.Length - 1, 1); sb.Append("]"); return sb.ToString(); } } 

The ASHX page is called and returns the following data:

[{id: 0, title: 'test 1', start: '2010-06-07', allDay: false}, {id: 2, title: 'test 2', start: '2010-06-07', allDay: false}]

Invoking the ASHX page does not display any results, but if I insert the values ​​returned directly into the events, they are displayed correctly. I am trying to get this code to work all day, and I do not understand why the events are not being set.

Any help or advice on how I can get this to work will be appreciated.

Steve

Answer 1

If someone runs into this problem. I tried all of the above solutions, but none of them worked. For me, the problem was solved using an older version of jquery. I switched from version 1.5.2, which was included in the fullcalendar package to version 1.3.2.

Answer 2

Steve, I came across something similar - it would reflect events if JSON were directly in the fullCalendar call, but it would not reflect the JSON identifier coming from an external URL. I finally got it working by changing the JSON so that "id", "title", "start", "end" and "allDay" contain quotes around them.

So, instead (for using your JSON sample): [{id: 0, title: 'test 1', start: '2010-06-07', allDay: false}, {id: 2, title: 'test 2 ', start:' 2010-06-07 ', allDay: false}]

... I had this: [{"id": 0, "title": "test 1", "start": "2010-06-07", "allDay": false}, {"id": 2 , "title": "test 2", "start": "2010-06-07", "allDay": false}]

Now, why it worked locally, but not remotely, I cannot say.

Answer 3

Your JSON data has lost the end element:

 {id: 0,title:'test 1',start: '2010-06-07',end: '2010-06-07',allDay: false} 

Answer 4

See what we know and eliminate:

•   The ASHX page gets called and returnd the ... data: 

  Thus, the server side part is working fine, and the server side calling code is working.

•   I paste the values ​​returned directly into the events it displays correctly. 

  Thus, the code that processes the response works correctly.

Logically, we see here that the code that links your server response to your calendar entry does not work. Unfortunately, I am not included in the jQuery fullCalendar method, but maybe you are missing a callback declaration?

Answer 5

I think this may have something to do with your date values.

Answer 6

FullCalendar events from an ASHX page without asp.net are the correct solution.

And I used a long format for dates.

And @Steve instead of StringAppending we can use: -

 System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); String sJSON = oSerializer.Serialize(evList); 

evList is your list containing all events that have such basic properties as id, start, end, description, allDay, etc.

I know this thread is an old thread, but it will be useful for other users.

Just match all the answers.

Answer 7

I struggled with this problem and resolved it using the .ashx handler as follows

My return class looks like ...

  public class Event { public Guid id { get; set; } public string title { get; set; } public string description { get; set; } public long start { get; set; } public long end { get; set; } public bool allDay { get; set; } } 

Where DateTime values ​​are converted to long values ​​using ...

 private long ConvertToTimestamp(DateTime value) { long epoch = (value.ToUniversalTime().Ticks - 621355968000000000) / 10000000; return epoch; } 

And ProcessRequest looks like ...

 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; DateTime start = new DateTime(1970, 1, 1); DateTime end = new DateTime(1970, 1, 1); try { start = start.AddSeconds(double.Parse(context.Request.QueryString["start"])); end = end.AddSeconds(double.Parse(context.Request.QueryString["end"])); } catch { start = DateTime.Today; end = DateTime.Today.AddDays(1); } List<Event> evList = new List<Event>(); using (CondoManagerLib.Linq.CondoDataContext Dc = new CondoManagerLib.Linq.CondoDataContext(AppCode.Common.CGlobals.DsnDB)) { evList = (from P in Dc.DataDailySchedules where P.DateBeg>=start && P.DateEnd<=end select new Event { description = P.Description, id = P.RecordGuid, title = P.Reason, start = ConvertToTimestamp(P.DateBeg), end = ConvertToTimestamp(P.DateEnd), allDay = IsAllDay(P.DateBeg, P.DateEnd) }).ToList(); } System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); String sJSON = oSerializer.Serialize(evList); context.Response.Write(sJSON); } 

And my document is ready ...

 > $(document).ready(function () { > $('#calendar').fullCalendar({ > header: { left: 'title', center: 'prev,today,next', right: 'month,agendaWeek,agendaDay' }, > editable: false, > aspectRatio: 2.1, > events: "CalendarEvents.ashx", > eventRender: function (event, element) { > element.qtip({ > content: event.description, > position: { corner: { tooltip: 'topLeft', target: 'centerLeft'} }, > style: { border: { width: 1, radius: 3, color: '#000'}, > padding: 5, > textAlign: 'center', > tip: true, > name: 'cream' > } > }); > } > }) > }); 

The qTip plugin can be found at http://craigsworks.com/projects/qtip/

Hope this helps.