Subscribe to Youtube channel

Add MouseOver and Mouseout effect to asp.net 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....

  <div>  
     <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"   
       ondayrender="Calendar1_DayRender">  
       <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" />  
     </asp:Calendar>  
   </div>  

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", "javascript:this.style.backgroundColor='#D4EDFF';var div=document.getElementById('myspan'); div.innerHTML=this.a.Title;;");  
       e.Cell.Attributes.Add("onmouseout", "javascript:this.style.backgroundColor='#CCCCCC'; ");  
     }  
   }  

Comments

Popular posts from this blog

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

Disable backspace key using Jquery

Implement Nlog in .Net core MVC application part 1

Root your Gingerbread 2.3.4 android Mobile Phone

Devexpress Datebox date formatting in angular 6 with example

Angular User Session Timeout example step by step

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

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

Clone a generic list in C# using extension method