The source code of the tutorial is available for download.
The rules that determine the reservation status are implemented in the MVC controller on the server side. It will also change the color of the duration bar accordingly:
C#
protected override void OnBeforeEventRender(BeforeEventRenderArgs e) { e.Html = String.Format("{0} ({1:d} - {2:d})", e.Text, e.Start, e.End); int status = Convert.ToInt32(e.Tag["ReservationStatus"]); switch (status) { case 0: // new if (e.Start < DateTime.Today.AddDays(2)) // must be confirmed two day in advance { e.DurationBarColor = "red"; e.ToolTip = "Expired (not confirmed in time)"; } else { e.DurationBarColor = "orange"; e.ToolTip = "New"; } break; case 1: // confirmed if (e.Start < DateTime.Today || (e.Start == DateTime.Today && DateTime.Now.TimeOfDay.Hours > 18)) // must arrive before 6 pm { e.DurationBarColor = "#f41616"; // red e.ToolTip = "Late arrival"; } else { e.DurationBarColor = "green"; e.ToolTip = "Confirmed"; } break; case 2: // arrived if (e.End < DateTime.Today || (e.End == DateTime.Today && DateTime.Now.TimeOfDay.Hours > 11)) // must checkout before 10 am { e.DurationBarColor = "#f41616"; // red e.ToolTip = "Late checkout"; } else { e.DurationBarColor = "#1691f4"; // blue e.ToolTip = "Arrived"; } break; case 3: // checked out e.DurationBarColor = "gray"; e.ToolTip = "Checked out"; break; default: throw new ArgumentException("Unexpected status."); } e.Html = e.Html + String.Format("<br /><span style='color:gray'>{0}</span>", e.ToolTip); int paid = Convert.ToInt32(e.DataItem["ReservationPaid"]); string paidColor = "#aaaaaa"; e.Areas.Add(new Area().Bottom(10).Right(4).Html("<div style='color:" + paidColor + "; font-size: 8pt;'>Paid: " + paid + "%</div>").Visible()); e.Areas.Add(new Area().Left(4).Bottom(8).Right(4).Height(2).Html("<div style='background-color:" + paidColor + "; height: 100%; width:" + paid + "%'></div>").Visible()); }
VB
Protected Overrides Sub OnBeforeEventRender(ByVal e As BeforeEventRenderArgs) e.Html = String.Format("{0} ({1:d} - {2:d})", e.Text, e.Start, e.End) Dim status As Integer = Convert.ToInt32(e.Tag("ReservationStatus")) Select Case status Case 0 ' new If e.Start < Date.Today.AddDays(2) Then ' must be confirmed two day in advance e.DurationBarColor = "red" e.ToolTip = "Expired (not confirmed in time)" Else e.DurationBarColor = "orange" e.ToolTip = "New" End If Case 1 ' confirmed If e.Start < Date.Today OrElse (e.Start = Date.Today AndAlso Date.Now.TimeOfDay.Hours > 18) Then ' must arrive before 6 pm e.DurationBarColor = "#f41616" ' red e.ToolTip = "Late arrival" Else e.DurationBarColor = "green" e.ToolTip = "Confirmed" End If Case 2 ' arrived If e.End < Date.Today OrElse (e.End = Date.Today AndAlso Date.Now.TimeOfDay.Hours > 11) Then ' must checkout before 10 am e.DurationBarColor = "#f41616" ' red e.ToolTip = "Late checkout" Else e.DurationBarColor = "#1691f4" ' blue e.ToolTip = "Arrived" End If Case 3 ' checked out e.DurationBarColor = "gray" e.ToolTip = "Checked out" Case Else Throw New ArgumentException("Unexpected status.") End Select e.Html = e.Html & String.Format("<br /><span style='color:gray'>{0}</span>", e.ToolTip) Dim paid As Integer = Convert.ToInt32(e.DataItem("ReservationPaid")) Dim paidColor As String = "#aaaaaa" e.Areas.Add((New Area()).Bottom(10).Right(4).Html("<div style='color:" & paidColor & "; font-size: 8pt;'>Paid: " & paid & "%</div>").Visible()) e.Areas.Add((New Area()).Left(4).Bottom(8).Right(4).Height(2).Html("<div style='background-color:" & paidColor & "; height: 100%; width:" & paid & "%'></div>").Visible()) End Sub