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.
No comments:
Post a Comment