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<strong>
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) </strong>
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</pre>
The result:
Legacy Comments
Nilesh
2008-02-13
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
Lee
2008-08-14
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
Jon
2008-08-14
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 ;).
raja
2008-09-04
re: How To Create A Sharepoint Like Calendar In ASP.net
Ve
kanawoot
2009-01-14
re: How To Create A Sharepoint Like Calendar In ASP.net
test
JarBlog
2009-12-01
re: How To Create A Sharepoint Like Calendar In ASP.net
interesting.. very interesting.. =)
Jarquel
2010-01-02
re: How To Create A Sharepoint Like Calendar In ASP.net
Very nice! Thanks!
Piscinas
2010-01-27
re: How To Create A Sharepoint Like Calendar In ASP.net
thanks for the example so good ;)
Very inresting! ;)
Glücksspielautomaten Portal
2010-03-27
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.
Harit shah
2010-03-29
re: How To Create A Sharepoint Like Calendar In ASP.net
hi can i get the code and design for "Entry.aspx" page?
Jon H
2010-03-29
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!
Aruna thakur
2010-05-29
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#?
Mike
2010-07-19
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.
columbia jackets
2010-10-21
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
geet
2011-07-13
re: How To Create A Sharepoint Like Calendar In ASP.net
Thanks for sharing..i like it very much.
geet
organizadores de bodas
2012-02-13
re: How To Create A Sharepoint Like Calendar In ASP.net
I need this information to improve my knowledge about asp
Thanks so much