Question

I’m trying to create a JQuery FullCalendar to use a WebService method as a data source.

My method is:

[WebMethod]
public EventData[] ListEvents(int start, int end)
{
}

My javascript is:

$('#calendar').fullCalendar({
  events: 'MyWebService.asmx/ListEvents'
}

The URL is being requested is:

http://localhost:49354/MyService.asmx/ListEvents?start=1338073200&end=1341702000&_=1341766605921

Which doesn’t resolve, how can I update this JQuery to call my WebMethod correctly?

Answer 1

I found the solution:

$(document).ready(function () {
        $('#Calendar').fullCalendar({
          events: function (start, end, callback) {

            $.ajax({
              type: "POST",
              url: 'Webservice.asmx/ListEvents',
              cache: false,
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (data) {
                var events = [];
                $(data.d).each(function () {
                  events.push({
                    title: this.Title,
                    start: this.Start,
                    end: this.End
                  });
                });
                callback(events);
              },
              error: function (jqXHR, textStatus, errorThrown) {
                alert('There was an error');
              }
            });
          }
        });
      });

In this example my data my web service returns times as number of seconds since the epoc:

[WebMethod]
    public CalendarEvent[] ListEvents()
    {
      DateTime epoc = new DateTime(1970, 1, 1);
      return new CalendarEvent[]
      {        
        new CalendarEvent { Title = "Event 1", Start = new DateTime(2012,7,9,16,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2012,7,9,17,0,0).Subtract(epoc).TotalSeconds},
        new CalendarEvent { Title = "Event 2", Start = new DateTime(2012,7,12,12,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2012,7,12,13,0,0).Subtract(epoc).TotalSeconds}
      };      
    }