Updating FullCalendar-asp-net project to the latest 1.6.4 version

Question

I am trying to update the fullcalendar-asp-net project with the latest version of fullcalendar script. That project uses 1.4.7 version of fullcalendar (which is very old) with jquery 1.3.2 (that is very old too). I like to whole functionality of that project so I just want to use it as is by updating it to the 1.6.4 (latest) version of fullcalendar with jquery 1.10.2 (Last version is shipped with that version of jquery).

The problem I am having is, that I cannot make the events appear from the handler, when I update the scripts. The only changes I made are changing the scripts at the page header like:

• Jquery 1.3.2 to 1.10.2
• Jquery-UI to 1.10.3
• FullCalendar 1.4.7 to 1.6.4

All the backend methods are working fine so I can add new events and save them to db and update them with no problems. When I reload the page, they all disappear (meaning they're not loading). That is the js code which should load the calendar on pageload (Unneccessary codes are deleted for simplification).

var calendar = $('#calendar').fullCalendar({
    events: "JsonResponse.ashx",
})

The strange thing is when I copy and paste the json response directly to events, they all appear. Code is like this:

var calendar = $('#calendar').fullCalendar({
    events: [{ id: '42', title: 'asdf', start: 1378771200, end: 1378944000, allDay: true, description: 'asdfasdf' },
        { id: '43', title: 'sadfsdf', start: 1378944000, end: 1379030400, allDay: true, description: 'asdfgadfasdfd' },
        { id: '44', title: 'asdf', start: 1379030400, end: 1379030400, allDay: true, description: 'asdfasdf' }]
})

I started to think between the versions 1.4.7 and 1.6.4 of fullcalendar, there should be a difference in loading events. When I look at the documentation, I see the exact same thing as I do. Isn't the idea just sending a JSON string to the events? The JSON string which is produced by ashx handler is correct, hence it works when I copy and paste it directly.

I am a little bit lost here and wasted enough time searching for relative info and reading the basics. Finally came here hoping someone could point me to the right direciton.

Note: I didn't write the ashx codes thinking it's not important since it creates a valid JSON string and it can be found from the fullcalendar-asp-net project.

Thanks!

Answer 1

At the end, I ended up modifying the original ashx handler in the "fullcalendar-asp-net" project. Instead of adding events to a string in a foreach loop, I created an event list and converted it to Json string with this code.

System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
   new System.Web.Script.Serialization.JavaScriptSerializer();
   string sJSON = oSerializer.Serialize(tasksList);

   context.Response.Write(sJSON);

The full ashx code is like this.

/// <summary>
/// Summary description for JsonResponse
/// </summary>
public class JsonResponse : IHttpHandler, IRequiresSessionState
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        //CONVERT FROM UTC TIMESTAMP TO LOCAL DATETIME
        DateTime start = ConvertFromTimeStamp(long.Parse(context.Request.QueryString["start"]));
        DateTime end = ConvertFromTimeStamp(long.Parse(context.Request.QueryString["end"]));

        List<int> idList = new List<int>();
        List<ImproperCalendarEvent> tasksList = new List<ImproperCalendarEvent>();

        //GENERATE JSON SERIALIZABLE EVENTS
        foreach (CalendarEvent cevent in EventDAO.getEvents(start, end))
        {
            tasksList.Add(new ImproperCalendarEvent
            {
                id = cevent.id,
                title = cevent.title,
                start = ConvertToTimestamp(Convert.ToDateTime(cevent.start).ToUniversalTime()).ToString(),
                end = ConvertToTimestamp(Convert.ToDateTime(cevent.end).ToUniversalTime()).ToString(),
                description = cevent.description,
                allDay = cevent.allDay,
            }
                );
            idList.Add(cevent.id);
        }

        context.Session["idList"] = idList;

        //SERIALIZE EVENTS TO STRING
        System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
         new System.Web.Script.Serialization.JavaScriptSerializer();
        string sJSON = oSerializer.Serialize(tasksList);

        //WRITE JSON TO RESPONSE OBJECT
        context.Response.Write(sJSON);
    }

    /// <summary>
    /// Converts a UTC transformed timestamp into a local datetime
    /// </summary>
    /// <param name="timestamp"></param>
    /// <returns></returns>
    private DateTime ConvertFromTimeStamp(long timestamp)
    {
        long ticks = (timestamp * 10000000) + 621355968000000000;
        return new DateTime(ticks, DateTimeKind.Utc).ToLocalTime();
    }

    private static readonly DateTime Epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);

    private static long ConvertToTimestamp(DateTime value)
    {
        TimeSpan elapsedTime = value - Epoch;
        return (long)elapsedTime.TotalSeconds;
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

When I asked this question, I was using a web method instead of that handler, so my js code to call the calendar was different than it should be. Now, I am using exactly the same method which was explained in the fullcalendar offical documentation. Like;

$('#calendar').fullCalendar({
events: '/myfeed.php', }); // for me, that is "JsonResponse.ashx"

Now it works with the latest version of all scripts which I mentioned at the question. Jquery 1.10.2, Jquery-UI 1.10.3 and fullcalendar 1.6.4. And it works perfectly!

I hope that others who had trouble figuring out that issue won't suffer as I did :)

Thanks!