DHTML ToolTip with Calendar Control

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.