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:

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