Additional Tip For That Calendar Control In ASP.net

Regarding my post about the tips and tricks with the ASP.net calendar control someone emailed me asking how to add additional text / images to the calendar control to give the calendar day a more appealing visual representation.

Something to this effect:

Image may be NSFW.
Clik here to view.

You handle images like so in the same event as we discussed before.  The event you want to use for this is the DayRender event since you want to control each day.  Anytime you need to handle something that is associated with a single day cell you have to take care of it in the day render event. 

How To Do This

I assume the reader has a good understanding of ASP.net, the web, and SQL.  In my case I had some fields to store a request status.  A request can be in three states:

1. Pending (yellow question mark)
2. Approved (green check mark)
3. Declined (a red x)

So in my previous post I showed you how to pull the requests from the SQL database.  Remember you do not have to do it this way, I am just showing you an example.  So in the DayRender event declare an Image web control:

Dim s as System.Web.UI.WebControls.Image

Then perform the following:

• Instantiate the object
• Set its image url property
• Set a tooltip (optional)
• Add the image object to the Controls collection of e ( e.Cell.Controls.Add)

So here we go:

s = New System.Web.UI.WebControls.Image()

With s

  .ImageUrl = "~/images/yourimage.gif"

  .ToolTip = "Some tool tip"

End With

e.Cell.Controls.Add(s)

In my case I store some tool tip information inside of the actual database by concatenating some fields together and bringing them back in a stored procedure.  That way I can set the tool tip with some text that may be valuable to the end user.

From Our Previous Example

Protected Sub Calendar13_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar13.DayRender
        Dim nextDate As DateTime
        Dim onmouseoverStyle As String = "this.style.backgroundColor='#D4EDFF'"
        Dim onmouseoutStyle As String = "this.style.backgroundColor='@BackColor'"
        Dim rowBackColor As String = String.Empty
        Dim notTouched As Boolean
        Dim s As System.Web.UI.WebControls.Image

        notTouched = True

        Try
            If Not CType(Session("dsRequests"), DataSet) Is Nothing Then
                For Each dr As DataRow In CType(Session("dsRequests"), DataSet).Tables(0).Rows
                    nextDate = CType(dr("VacationDate"), DateTime)
                    If nextDate = e.Day.Date Then
                        e.Cell.BackColor = System.Drawing.ColorTranslator.FromHtml(CType(dr("HTMLColor"), String))

                        Select Case (CType(dr("VacationStatusID"), String))
                            Case "Pending"
                                s = New System.Web.UI.WebControls.Image()
                                s.ImageUrl = "~/images/p.gif"
                                s.ToolTip = CType(dr("ToolTip"), String)
                                e.Cell.Controls.Add(s)

                            Case "Approved"
                                s = New System.Web.UI.WebControls.Image()
                                s.ImageUrl = "~/images/a.gif"
                                s.ToolTip = CType(dr("ToolTip"), String)
                                e.Cell.Controls.Add(s)

                            Case "Declined"
                                s = New System.Web.UI.WebControls.Image()
                                s.ImageUrl = "~/images/d.gif"
                                s.ToolTip = CType(dr("ToolTip"), String)
                                e.Cell.Controls.Add(s)
                            Case Else
                        End Select

                        notTouched = False
                    End If
                Next
            End If

            If notTouched And Not e.Day.IsWeekend Then
                e.Cell.Attributes.Add("onmouseover", onmouseoverStyle)
                e.Cell.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor", rowBackColor))
            End If

        Catch ex As Exception
            Response.Write("Errors occurred: No RuleID / Hire Date specified for user!  " & "Additional errors include: " & ex.ToString())
        End Try
    End Sub

Image may be NSFW.
Clik here to view.