Try MySite.GetContent() Catch(Useless Info) Finally Site.Close() End Try

The guide to programming and analyzing SQL, .NET, and SAP
posts - 18, comments - 280, trackbacks - 0

My Links

News

Hello World. I'm Jon Hermiz and am a software engineer here in Michigan. Feel free to look around and leave feedback!

Archives

Post Categories

How To Create A Sharepoint Like Calendar In ASP.net

This article relates to a couple of articles that are on the site.  The original article was "Cool Tricks With The ASP.net Calendar".  You can find this here: http://weblogs.sqlteam.com/jhermiz/archive/2007/12/10/Cool-Tricks-With-The-ASP.net-Calendar.aspx.  The other article you might find useful is the "Additional Tip For that Calendar Control In ASP.net" this article can be found here: http://weblogs.sqlteam.com/jhermiz/archive/2007/12/11/Additional-Tip-For-That-Calendar-Control-In-ASP.net.aspx.

Have you ever wanted to create a nice calendar control much like the sharepoint calendar control?  You know the calendar control with hyperlink data directly on each calendar day.  The previous articles shows you how to use the DayRender Calendar control event to add image controls.  But what about adding hyperlink controls as well as setting the NavigateURL property for each hyperlink to take you to another web page.

This process is very similiar to the second article where we added image controls to a calendar control.  Now we want to simply add hyperlink controls.

To do this drag and drop a calendar control on your web page.  Use your SQL knowledge to pull some data (with the date for each row of data) from your database table.  Store this data in a datatable or a dataset.  Then loop through your data and compare the date in your dataset / datatable with the day in the Calendar_DayRender event.  If they are equal instantiate a Hyperlink object.  Set its text property, its navigateurl property and whether or not you want a border.

From our previous examples here's some code to help you out:

 

Protected Sub Calendar13_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar13.DayRender
        Dim nextDate As DateTime
        Dim hl As HyperLink
        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

        notTouched = True
        Try
            If Not CType(Session("dsHolidays"), DataSet) Is Nothing Then
                For Each dr As DataRow In CType(Session("dsHolidays"), DataSet).Tables(0).Rows
                    nextDate = CType(dr("HolidayDate"), DateTime)
                    If nextDate = e.Day.Date Then
                        e.Cell.BackColor = System.Drawing.Color.Pink
                        e.Cell.ForeColor = System.Drawing.ColorTranslator.FromHtml("#24618E")
                        notTouched = False
                    End If
                Next
            End If

            If Not CType(Session("dsRequests2"), DataSet) Is Nothing Then
                For Each dr As DataRow In CType(Session("dsRequests2"), DataSet).Tables(0).Rows
                    nextDate = CType(dr("VacationDate"), DateTime)
                    If nextDate = e.Day.Date Then
                        hl = New HyperLink
                        hl.Text = CType(dr("ToolTip"), String)
                        hl.NavigateUrl = "Entry.aspx?ID=" & CType(dr("VacationID"), String)
                        hl.BorderColor = Color.Gray
                        hl.BorderWidth = 1
                        hl.ToolTip = "Click this item to get more detailed information."
                        hl.Font.Name = "Arial Narrow"
                        hl.Font.Bold = False
                        hl.ForeColor = System.Drawing.ColorTranslator.FromHtml("#24618E")
                        e.Cell.BackColor = Color.Azure
                        e.Cell.Controls.Add(hl) 
                        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

The result:

Print | posted on Monday, December 17, 2007 9:01 AM | Filed Under [ .NET SQL Server ]

Feedback

Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Hi ,

This is reallly very good example for calendar control.

Im trying this in asp.net 2003 but in 2003 this one not attractive like this???? how can i make it like this? please send me if you have full application for it...

thanking you in advance

n_vankani@yahoo.com
2/13/2008 11:18 PM | Nilesh
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Hi,

I like this tutorial, thanks for sharing the information. I have taken your guide and tried to fit it in to our system with some success. The problem I had was I wanted to show quite a lot of detail in the hyperlinks tooltip. I managed to get round this by using an Ajax control and alternating the hyperlinks ID. This seems to work very well.

What I would like to do now is have a hyperlink that spans over dates in blocks (Like sharepoint does). The closest I can get to this is by including the multi day entry in each of the days that it coveres in the calendar and colour coding time spans for easier visual affect (please see the image in the URL).

Please let me know If you can help or you would like to know more about what I did here.

Thanks again

Lee
8/14/2008 10:41 AM | Lee
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Did you get this working? It looks like you did from your jpg picture but I cannot tell.
For the tooltip you did not even have to take that route. The tooltip property can be changed via code.
Something to the effect of

Object.ToolTip = "Here is one line" & Environment.NewLine & "Here is another line"
etc etc..

You could of even added text from a db....

Regarding multi hyperlinks for a sharepoint look its very simple to do this. Each cell can take a hyperlink object. So simply add a hyperlink object to the cell in question. Thanks for the feedback. Donations are welcome via paypal :-) (if I saved your job or got you a raise ;).
8/14/2008 10:48 AM | Jon
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Ve
9/4/2008 11:02 AM | raja
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

test
1/14/2009 1:58 PM | kanawoot
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

interesting.. very interesting.. =)
12/1/2009 8:34 AM | JarBlog
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Very nice! Thanks!
1/2/2010 7:44 AM | Jarquel
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

thanks for the example so good ;)

Very inresting! ;)
1/27/2010 7:12 AM | Piscinas
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Thanks for the post, I can't wait to see how you can use Exchange calendars to do overlays.Currently I am just using an iframe that links to the view of the calendar. The only problem with this approach is all of the nav menus. If I could get rid of them... then I'd be pretty content, but I'm open to other ideas.
3/27/2010 2:13 AM | Glücksspielautomaten Portal
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

hi can i get the code and design for "Entry.aspx" page?
3/29/2010 3:57 PM | Harit shah
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

@Harit Shah - The code is trivial and pretty simple, you should be able to do it. Good luck!
3/29/2010 3:58 PM | Jon H
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net


This is reallly very good example for calendar control.
hi can i get the code and design page in c#?
5/29/2010 2:01 AM | Aruna thakur
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

vertical-align: top;
text-align:left;

Add this to your CSS code for CallanderDayCSSClass also I like to Keep the height the same with:


Dim c As TableCell = CType(e, DayRenderEventArgs).Cell
c.Height = CType(50, Web.UI.WebControls.Unit)

in your code.
7/19/2010 4:55 PM | Mike
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

This process is very similiar to the second article where we added image controls to a calendar control. Now we want to simply add hyperlink controls.



snow boots for women | columbia sportswear outlet | cheap mac makeup | the north face jackets

womens snow boots | columbia sportswear | cheap makeup | cheap north face jackets
10/21/2010 5:43 PM | columbia jackets
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

Thanks for sharing..i like it very much.
geet
7/13/2011 3:46 AM | geet
Gravatar

# re: How To Create A Sharepoint Like Calendar In ASP.net

I need this information to improve my knowledge about asp

Thanks so much
2/13/2012 4:03 AM | organizadores de bodas
Comments have been closed on this topic.

Powered by:
Powered By Subtext Powered By ASP.NET