Friday, March 16, 2012

Make a calendar cell change color on mouse over

Hi,

Please tell me, how do I make a calnedar cell change color on mouse over event.

I am working in Visual Studio 2005 using vb.net.

Thanks,

Shivani

Start by knowing this fact: The DayRender event provides you with a Cell control. It is the control that needs the mouseover. So setup the DayRender event.

There are two ways for mouseovers.

1. DHTML - This works with more browsers, but is more complex and creates far more HTML output, because each cell will get its own copy of the scripts.

Start with e.Cell in DayRender. You can assign scripts like this:
e.Cell.Attributes.Add("onmouseover", "this.className = 'stylesheetname';");
e.Cell.Attributes.Add("onmouseout", "this.className = 'original stylesheetname';");

2. CSS - This works in FireFox, Opera 9, Safari, and IE 7.
You can use the same technique for "hover" that is available on the <a> tag.

- Create a style sheet class name with the hover attribute:
.DayCell :hover
{
color: green;
}

- Assign the class name to Calendar.DayStyle.CssClass.

FYI: There are several third party calendar controls that introduce a lot of new features, such as mouseover and avoiding postback on each click by using javascript to update the calendar. I am the author ofone. You will find others in this site's Control Gallery,www.123aspx.com, andwww.411asp.net. These are great resources to quickly introducing functionality into your site.

0 comments:

Post a Comment