FullCalendar events from asp.net ASHX page not displaying - asp.net

Question

I have been trying to add some events to the fullCalendar using a call to a ASHX page using the following code.
Page script:
<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 gets called and returnd 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}]
The call to the ASHX page does not display any results, but if I paste the values returned directly into the events it displays correctly. I am I have been trying to get this code to work for a day now and I can't see why the events are not getting set.
Any help or advise on how I can get this to work would be appreciated.
Steve

Answer 1

In case anyone stumbles across this problem. I tried all of the above solutions, but none of them worked.
For me, the problem was solved by 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 ran into something similar -- it would render the events if the JSON was directly in the fullCalendar call, but it would not render the identicla JSON coming from an outside URL. I finally got it to work by modifying the JSON so that "id", "title", "start", "end", and "allDay" had the quotes around them.
So instead of this (to use your sample JSON):
[{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 can't say.

Answer 3

Your JSON data lost the end item:
{id: 0,title:'test 1',start: '2010-06-07',end: '2010-06-07',allDay: false}

Answer 4

Let's look at what we know and eliminate possibilities:
The ASHX page gets called and returnd the ... data:
So the server-side portion is working just fine, and the code to call out to the server side is working.
I paste the values returned directly into the events it displays correctly.
So the code that handles the response works correctly.
Logically we see here that code that connects your server response to your calendar's input is not working. Unfortunately, I'm not up on the jQuery fullCalendar method, but perhaps you're missing a callback declaration?

Answer 5

I think it might have something to do with your date values.

Answer 6

FullCalendar events from asp.net ASHX page not displaying is a correct solution to the issue.
And I used 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 being your list containing all events which has the essential properties like id,start,end,description,allDay etc..
I know this thread is an old thread,but this will be helpful to other users.
Just collating all the answers.

Answer 7

I struggled with this issue and resolved it using an .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 the 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 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 pluging can be found at http://craigsworks.com/projects/qtip/
Hope this helps.