Adding dynamic color to FullCalendar from ASP.NET Webservice.

Building on the last example of how to get FullCalendar to run using VB.NET using a webservice, today we will show a simple example of adding dynamic color. In the example I created I have 3 events, holidays, vacations and other. I would like to color each event a separate color to make it easy to tell holidays from vacations.

First we need to open the CalendarDTO class that we use to pass data from the webservice back to the FullCalendar plugin.
In the class add a single property named className, take note that this property name needs to be exact!

    Private m_Class As String
    Public Property className() As String
        Get
            Return m_Class
        End Get
        Set(ByVal value As String)
            m_Class = value
        End Set
    End Property

Next in the Calendar.vb webservice you need to add the class name that you will use in the sytlesheet. For my example I am going to randomly assign the class names holiday, vacation and other.

     _
    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 rand As New System.Random(2)

        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()


            Select Case rand.Next(1, 3)
                Case 1
                    value.className = "holiday"
                Case 2
                    value.className = "vacation"
                Case 3
                    value.className = "other"
            End Select

            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
        Return js.Serialize(events)
    End Function

Now we need to add the style to the page with the calendar, once again you need to make sure the name matches the name you used in the className field in the webservice.

<style type="text/css">
    .holiday, 
    .fc-agend a .holiday .fc-event-time,
    .holiday a
    {
        background-color: Olive; /* background color */
        border-color: Olive;     /* border color */
        color: White;           /* text color */
    }
    .vacation, 
    .fc-agend a .vacation .fc-event-time,
    .vacation a
    {
        background-color: Maroon; /* background color */
        border-color: Maroon;     /* border color */
        color: White;           /* text color */
    }
    .other, 
    .fc-agend a .other .fc-event-time,
    .other a
    {
        background-color: Fuchsia; /* background color */
        border-color: Fuchsia;     /* border color */
        color: White;           /* text color */
    }
</style>

Run the example and you should have colored events!





The key to this is to watch the names and make sure you are consistant.

Up next will be integrating a tooltip with matching colors.

jQuery FullCalendar and ASP.NET

I needed to display a simple event calendar and looked around for the easiest path to the solution and found fullcalendar v1.4.6. The control is simple and elegant, but not very asp.net and expecially vb.net friendly. This is how you get it to work with a VB.NET webservice that can be used to pull from a database.

Update: v1.4.10 example can be found here.

Updated!  You can now download the example code here.
I am going to assume that you are able to create a basic asp.net website, add your own calendar page and put the fullcalendar control on the page.

First we will create a data class to return the results from the webservice.

Public Class CalendarDTO
Private m_id As Int32    
Public Property id() As Int32
Get
Return m_id
End Get
Set(ByVal value As Int32)
m_id = value
End Set
End Property

Private m_Title As String
Public Property title() As String
Get
Return m_Title
End Get
Set(ByVal value As String)
m_Title = value
End Set
End Property

Private m_Start As Int64
Public Property StartDate() As Int64
Get
Return m_Start
End Get
Set(ByVal value As Int64)
m_Start = value
End Set
End Property

Private m_End As Int64
Public Property EndDate() As Int64
Get
Return m_End
End Get
Set(ByVal value As Int64)
m_End = value
End Set
End Property

Private m_Url As String
Public Property url() As String
Get
Return m_Url
End Get
Set(ByVal value As String)
m_Url = value
End Set
End Property
End Class

The part of this code you need to take special note is EndDate and StartDate properties, we need to convert these to start and end in the fullcalendar.js file.

Next we will add the basic info to the webservice (once again I hope you can find enough examples to add a webservice on the web). Points to take note of are the startDate and endDate strings, these will be passed in as a unixTimespan and will look like a long integer, we will need to convert our dates from this format.

Public Function EventList(ByVal startDate As String, ByVal endDate As String) As String
Dim events As List(Of CalendarDTO) = New List(Of CalendarDTO)()
' Do Some SQL Here
Using con As New SqlConnection(conString)
Dim sqlCmd As SqlCommand = New SqlCommand("GetCalendarEvents", con)
sqlCmd.Parameters.Add(New SqlParameter("@startdate", Data.SqlDbType.DateTime))
sqlCmd.Parameters("@startdate").Value = FromUnixTimespan(startDate)
sqlCmd.Parameters.Add(New SqlParameter("@enddate", Data.SqlDbType.DateTime))
sqlCmd.Parameters("@enddate").Value = FromUnixTimespan(endDate)

con.Open()
Dim sdr As SqlDataReader = sqlCmd.ExecuteReader
While sdr.Read
Dim value As CalendarDTO = New CalendarDTO()
If Not IsDBNull(sdr("EndDate")) Then
value.EndDate = ToUnixTimespan(sdr("EndDate"))
End If
value.StartDate = ToUnixTimespan(sdr("StartDate"))
value.id = sdr("Event_ID")
value.title = sdr("title")
value.url = "http://url/"
events.Add(value)
End While
End Using

Dim js As New JavaScriptSerializer
Return js.Serialize(events)
End Function

Private Function ToUnixTimespan(ByVal d As DateTime) As Int64
Dim time As New TimeSpan()
time = d.ToUniversalTime().Subtract(New DateTime(1970, 1, 1, 0, 0, 0))
Return CType(Math.Truncate(time.TotalSeconds), Int64)
End Function

Private Function FromUnixTimespan(ByVal s As String) As DateTime
Dim time As DateTime = New DateTime(1970, 1, 1, 0, 0, 0)
Return time.AddSeconds(s)
End Function

Now to call the json formatted webservice we need to add "Calendar.asmx/EventList" to the events to be called by the calendar plugin.

<script type="text/javascript" language="javascript">
$(document).ready(function() {       
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
events: "Calendar.asmx/EventList"         
//events: [{title:'event1',start:'2010-06-01'},{title:'event2',start:'2010-06-05',end:'2010-06-07'}]                        
});         
});
</script>

Last we need to make the changes to make the fullcalendar.js file VB.NET friendly.
Line 25 (give or take)
Replace the following lines:

startParam: ‘start’,
endParam: ‘end’,

with

startParam:’startDate’,
endParam:’endDate’,

This will change the passed parameters to work with the webservice created above (call using startDate and endDate instead of start and end.
Next we need to change all the returned fields from the webservice calendarDTO class from startDate to start and endDate to end.
At line 442 in the ‘reportEventsAndPop = function(a) function you need to add:

reportEventsAndPop = function(a) {
if (a.d) {
var a = eval('(' + a.d.replace(/StartDate/g, 'start').replace (/EndDate/g, 'end') + ')');
}
reportEvents(a);
popLoading();
};

This will convert the json to an object and replace all the ‘StartDate’ and ‘EndDate’ fields with ‘start’ and ‘end’
For the ajax call to work using a asp.net webservice you need to add the type: ‘Post’ since GET is not allowed, You need to specifiy the content and data type and lastly you need to use the jasn2.js script to convert the params variable to a json string to pass into the webservice.
At line 448 replace the $.ajax call with the following:

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

Take special note of the JSON.stringify(params), this uses the json2.js script availible from json.org. This is required to convert the passed parameters into a json formated string.