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.