Jon Hermiz Blog

The guide to programming and analyzing SQL, .NET, and SAP

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:

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

 

Legacy Comments


BJoshi
2008-05-12
re: Additional Tip For That Calendar Control In ASP.net
Hey!
Nice stuff!
I have a question. Is there way to link .net calendar to sharepoint events so that when people click on the dates it will show the events of that respective date stored in the sharepoint calendar. Basically I want to have a simple calendar in quick launch of my page and when people click on any date of calendar it should display events on that date on the right side of my page.

Thanks

raja
2008-09-04
how to add alternate row backcolors to asp:calendar
Can any one help me out how how to add the alternate row backcolors to asp:calendar

i mean every altenate row in calendar control should have different backcolor.

its very urgent

Raja

Jon
2008-09-04
re: Additional Tip For That Calendar Control In ASP.net
Raja this is very simple, the DayRender event fires PER EVERY DAY.
So create a WhatWeekIsIt function that returns the week number and pass it the day of the week.
Then use a case statement or a switch to determine the week number. Then just change the color of the cell...
If you change the color of a cell for say the full week guess what you got an entire row of this newly changed color.
You could also make use of the MOD keyword to do the mod of the week number. If the mod returns no remainder you can make the cell white else make it red (or whatever color you want). Mod as in % for instane 2 MOD 2 returns 0 but 3 MOD 2 returns 1...

So if you have the following week numbers:

1
2
3
4

Then week 1 returns 1 mod
week 2 returns 0 mod
week 3 returns 1 mod
week 4 returns 0 mod..

and on and on and on...then you simply change the color based on being 1 or 0 (on or off).

This is extremly simple!

Adérito
2008-10-31
re: Additional Tip For That Calendar Control In ASP.net
But this don't work if you have more than one event in one day, this work's good for one to one (day - event)

Jon
2008-11-05
re: Additional Tip For That Calendar Control In ASP.net
Aderito that is not true, you can have multiple events in a day. When you click the day the day render event can check the number of events and display a grid of those multiple events. I have this sort of thing in a production environment already.

Satheesh
2009-04-14
re: Additional Tip For That Calendar Control In ASP.net
Hi,

Its a nice post, I have a doubt, How to add controls like textbox to header of calendar control asp.net?

Please give me if you have any thoughts on this.

Thanks,
Satheesh M

gunitado
2010-04-08
re: Additional Tip For That Calendar Control In ASP.net
Great article!!
Thanks

df
2010-10-26
re: Additional Tip For That Calendar Control In ASP.net
asd

wayner
2010-10-27
re: Additional Tip For That Calendar Control In ASP.net
I'd like to show holidays as days in red from a database, and thats easy enough, but if I want users to be able to click on a day to create a holiday (turning the day red), or select the day and press a button to create the holiday (turning the day red). Would that be possible, and how might that be done?

Manoj Bhatt
2012-01-11
re: Additional Tip For That Calendar Control In ASP.net
This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url..........
www.mindstick.com/...

Thanks Everyone for your precious post!!

madrid
2012-04-19
re: Additional Tip For That Calendar Control In ASP.net
Good information, thanks so much

v.r.hari
2012-07-05
re: Additional Tip For That Calendar Control In ASP.net
Good One. Makes a great visual effect. thanx..