Add MouseOver and Mouseout effect to Calendar Control

When I thought that give some interesting effect to calendar control, which will improve look and feel of the Calendar

I started working on it and I created the following code which I want to share
following is my design code....

     <asp:Calendar ID="Calendar1" runat="server" BackColor="White"   
       BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"   
       Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth"   
       onselectionchanged="Calendar1_SelectionChanged" Width="779px"   
       <SelectedDayStyle BackColor="#333399" ForeColor="White" />  
       <TodayDayStyle BackColor="#999999" ForeColor="White" />  
       <OtherMonthDayStyle ForeColor="#999999" />  
       <DayStyle BackColor="#CCCCCC" Font-Bold="true" CssClass="DayStyle" />  
       <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />  
       <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"   
         Height="8pt" />  
       <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True"   
         Font-Size="12pt" ForeColor="White" Height="12pt" />  

and the following is my code behind code where i have written DayRender event to apply MouseOver 
and Mouseout events to each cell

  protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)  
     if (!e.Day.IsToday && !e.Day.IsSelected)  
       e.Cell.Attributes.Add("onmouseover", "'#D4EDFF';var div=document.getElementById('myspan'); div.innerHTML=this.a.Title;;");  
       e.Cell.Attributes.Add("onmouseout", "'#CCCCCC'; ");  


Popular posts from this blog

Restore the lost focus of Auto post back controls in update Panel control

Disable backspace key using Jquery

Clone a generic list in C# using extension method

Angular User Session Timeout example step by step

Add Comma automatically while entering amounts in textbox using Javascript

Send bulk Email in using excel file

Remove Owin from MVC 5 Application and use custom forms authentication

How to Import CSV File and bind csv file data to gridview in using c#

Implement Nlog in .Net core MVC application part 1