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

Root your Gingerbread 2.3.4 android Mobile Phone

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

Disable backspace key using Jquery

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

Implement Nlog in .Net core MVC application part 1

Angular User Session Timeout example step by step

Devexpress Datebox date formatting in angular 6 with example

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

Add Comma automatically while entering amounts in textbox using Javascript