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

Post a Comment

Popular posts from this blog

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

-
Problem: We put  autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details  the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times. Solution: Step 1: Save following in js file give any name to it (like MyUpdatePanelFocus.js ) var lastFocusedControlId = ""; function focusHandler(e) { document.activeElement = e.originalTarget; } function appInit() { if (typeof (window.addEventListener) !== "undefined") { window.addEventListener("focus", focusHandler, true); } Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler); Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler); } function pageLoadingHandler(sender, args) { lastFocusedControlId = typeof (document.acti
Read more

Clone a generic list in C# using extension method

-
In practical situation you need to clone of object so that change in cloned object will not affect the original one. If you need a cloned list with the same capacity you need to do some extra stuff with your user type. I came up with this easy solution using ICloneable interface in your custom type class. The first step you need to implement the ICloneable interface in your class like below. public class MyClassDto : ICloneable { public Int64 Id { get; set; } public string Time { get; set; } public int user{ get; set; } public object Clone() { return new MyClassDto{ Date = this.Date, Id = this.Id, user = this.user}; } } after that you need to add extension method in common class so that you can use it everywhere you want. public static class Extensions { public static List<T> Clone<T>(this List<T> listToClone) where T : ICloneable { return listToClone.Select(item
Read more

Add Comma automatically while entering amounts in textbox using Javascript

-
Use following javascript function to add comma in numerics input in textbox function Comma(Num) { Num += ''; Num = Num.replace(/,/g, ''); x = Num.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d)((\d)(\d{2}?)+)$/; while (rgx.test(x1)) x1 = x1.replace(rgx, '$1' + ',' + '$2'); return x1 + x2; } Use following event of input textbox to call above function onkeyup = "javascript:this.value=Comma(this.value);"
Read more