Introduction:
In one of my previous articles I
talked about how you can effectively use
DHTML with
Asp.net to make cool tooltip. In this article I will show how you can use
the same DHTML tooltip with the calendar control.
Getting Started:
The first thing you need to do is
to download the DHTML script from
www.dynamicdrive.com. You can download the script from this url
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm. After download
the script just place the required css in the head section of the page and the
script in the body of the page.
Screen shot of what we are
going to do:
Here is a screen shot of what we
are going to do in this article. As you can see that when you place your cursor
over any date in the calendar it pops out the description in the DHTML box.
The Code:
The code is pretty simple. First
you need to pull all the information from the database to your dataset or any
other collection.
|
private
DataSet
GetArticles() {
string
connectionString = @"Server=localhost;Database=GridViewGuy;Trusted_Connection=true";
SqlConnection myConnection =
new
SqlConnection(connectionString);
SqlDataAdapter ad =
new
SqlDataAdapter("SELECT
TOP 10 ArticleID,Title,Description,Abstract,DateCreated FROM Articles ORDER
BY DateCreated DESC",
myConnection);
DataSet
ds = new
DataSet();
ad.Fill(ds,
"Articles");
return
ds;
} |
Next to display this information
in the Calendar boxes you need to implement the Day_Render event of the Calendar
Control.
|
protected
void
Calendar1_DayRender(object
sender, DayRenderEventArgs
e) {
DataSet
d = GetArticles();
foreach(DataRow
dr in
d.Tables[0].Rows) {
string
dt = ((DateTime)
dr["DateCreated"]).ToShortDateString();
if
(dt == e.Day.Date.ToShortDateString())
{
e.Cell.Text = dr["Title"]
as
String;
}
}
string
title = e.Cell.Text;
string
ab = String.Empty;
foreach
(DataRow dr
in
d.Tables[0].Rows)
{
if
(title == dr["Title"]
as
String)
{
ab = dr["Abstract"]
as
String;
}
}
string
dhtmlBox = "ddrivetip('"
+ ab + "','lightyellow','200')";
e.Cell.Attributes["onmouseover"]
= dhtmlBox;
e.Cell.Attributes["onmouseout"]
= "this.style.backgroundColor='#C0C000';";
} |
All I am doing is I fill the
Calendar cells using the e.Cell.Text property with the title of the article. And
since I got everything I need thing I need in the dataset I simply browse the
database for the particular description of the article and pops it up in the
DTHML tooltip.
I hope you liked the article,
happy coding!