Monday, February 21, 2011

Full Calendar 1-4.10

After a year of not playing with FullCalendar it was brought to my attention that my examples no longer work with version 1-4.10 of  FullCalendar. So I took my sample code and modified it to work with the latest version of FullCalendar and ASP.NET (VB).  The problems are still the same, just in different places.

You need to still modify the start / end param names (now  called startParam and endParam) to use another date name, I prefer startDate and endDate.  If you open the fullcalendar.js file you will find these around line 43.


//startParam: 'start',
//endParam: 'end',
startParam: 'startDate',
endParam: 'endDate' 

Next you need to a search for .ajax (or skip to line 923) and modify the lines to add a couple key points to make this work with an ASP webservice.

 $.ajax({
url: source,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(params),
cache: options.cacheParam 
false, // don't let jquery prevent caching if cacheParam is being used
success: function(events) {
popLoading();
callback(eval(events.d));
}


The last change was to create your webservice that will post your calendar events from your database to the calendar via the jquery ajax call. 

    <WebMethod()> _
    Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
        ' List to hold events
        Dim events As List(Of CalendarDTO) = New List(Of CalendarDTO)()

        Dim starting As DateTime = FromUnixTimespan(startDate)
        ' Loop through events to be added
        For i As Integer = 0 To 4
            ' Create a new event and start to populate
            Dim value As CalendarDTO = New CalendarDTO()
            ' Date is required to be in a unix format
            value.StartDate = ToUnixTimespan(starting.AddDays(i * 2))
            value.id = i
            value.title = "Title of event number " + i.ToString()

            If i Mod 2 = 1 Then ' if even we will add an end date
                value.EndDate = ToUnixTimespan(starting.AddDays(1 + (i * 3)))
            End If
            events.Add(value)
        Next
        ' Serialize the return value so it can be decoded in java.
        Dim js As New System.Web.Script.Serialization.JavaScriptSerializer
        Dim returnvalue As String = js.Serialize(events).Replace("StartDate", "start").Replace("EndDate", "end")

        Return ret


As promised here is the full sample code to get fullcalendar working with a ASP webservice.

On a side note.. Have you read the latest Scot Harvath book, its well worth the read!



Enjoy!


4 comments:

  1. I copied all this, but it doesn't work.

    The message from FireBug's Console:

    System.InvalidOperationException: Request format is invalid: application/json; charset=UTF-8.
    at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
    at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

    I'm on ASP.NET Development Server/8.0.0.0 (Visual Studio 2005)

    ReplyDelete
  2. Thanks for sharing the full sample code. Especially thanks for using VB instead of C#, the organization I work for requires all code to be in VB.

    ReplyDelete
  3. Thanks for this... I have this working but have now tried to make the same amendments to FullCalendar 1.5.3 as I'l like t use this version. Changing start and end to startDate and endDate was easy but I could not find the other section of code. It looks like with 1.5.3 you can select GET or POST by specifying the option when initating FullCalendar. I've tried all sorts of hack but no joy yet... Do you have any pointers?

    ReplyDelete
    Replies
    1. Hi. I too had the same problem now.. did you you succeed??? please let me know.

      Delete