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

Disable backspace key using Jquery

-
Disable backspace key in HTML form using Jquery in simple steps. While user enters data into application if user accidentally  press backspace button then it will redirect to previous page and all entered data would be lost. to eliminate this event we can disable the backspace key using Jquery. Following is the JQuery script tag you can add to the web page $(document).keydown(function (e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 8) { if ((nodeName === 'input' && e.target.type === 'text') || nodeName === 'textarea') { // do nothing } else { e.preventDefault(); } } }); The above code can be used seamlessly with any web technology you are using. Hope this will help you in your web application. Happy coding:)
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

Angular User Session Timeout example step by step

-
Image
This functionality let the user know that their session is about to expire and that they would be logged out if they didn’t take action. I have written this functionality in Angular for my latest application.  If you are new to Angular 6 then read my article about Setting up Angular 6 step by step before jump to this article to get handy in Angular 6. Dealing with timers in Angular can be significantly different when using React components and subscriptions. The basic premises remains the same, though. We’ll have a service with a timer that will provide a Subject to which consumers of the service can subscribe. A React Subject provides an easy mechanism to trigger a “next” subscription to alert consumers that the timer has expired. import { Injectable } from '@angular/core' ; import { Observable, Subject, Subscription, BehaviorSubject} from 'rxjs/Rx' ; @Injectable() export class IdleTimeoutService {      private _count: number = 0
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

Send bulk Email in asp.net using excel file

-
When you want to send the mail to multiple person email id and your data exists in the excel file like email address and his name. you can accomplish this task using asp.net and c#. In C# under System.Net.Mail and System.Net  namespace you can use classes which can help us to send mail effortlessly. I am giving some sample code to understand the concept Following is aspx design Page Sample < %@ Page Language =" C# " AutoEventWireup =" true " CodeFile =" LogDatails.aspx.cs " Inherits =" LogDatails " % > < !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < html xmlns =" http://www.w3.org/1999/xhtml " > < head runat =" server " > < title > Untitled Page < / title > < / head > < body > < form id =" form1 " runat =" server " >
Read more

Remove Owin from MVC 5 Application and use asp.net custom forms authentication

-
Image
Owin comes with 15 other dependencies when we add default "blank" mvc5 template in solution. Which some time is irrelevant to web application hence needs to be removed for adding custom authentication techniques in the web application. Remove the owin  from solution is tedious task but if we follow the below procedure then it can be easily removed from the solution. Right click on your project and from menu click on Manage Nuget Packages. on left side of Manage Nuget Packages window click on Installed Package then on right side of window in search box type owin.  Uninstall packages in order of: microsoft.aspnet.identity.owin microsoft.owin.host.systemweb microsoft.owin.security.cookies microsoft.owin.security.facebook microsoft.owin.security.google microsoft.owin.security.microsoftaccount microsoft.owin.security.twitter microsoft.aspnet.identity.entityframework microsoft.aspnet.identity.core Open web.config file and remove these sections from   &l
Read more

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

-
I am going to demonstrate in this article about importing CSV file data into datatable and then bind that data to Asp.net gridview control. i have tried to make code simpler and less line of code. I am assuming that you have saved the csv file to server by using fileupload control. After that create function which returns string[] private IEnumerable<string[]> GetAllDataFromCSVFile(string FileName) { string str; using (StreamReader rd=new StreamReader(FileName)) { while ((str = rd.ReadLine()) != null) { yield return str.Split(','); } } } Create another function which returns final data-table with CSV File data private DataTable GetCSVData(string FileName) { var values = GetAllDataFromCSVFile(FileName); DataTable dt = new DataTable(); int j=0; foreach (var i
Read more

Implement Nlog in .Net core MVC application part 1

-
Image
Logging is a very important part of the enterprise application/web application. Setting up the logging correctly not only beneficial for long term maintenance of the application but also it is useful tool to find out the RCA in case of mission critical bug arises. Therefor we will going to discuss the various logging technique implementation using Nlog library package. In this article we will going to use .net core application for demonstration but you can implement it in .net framework application also. So lets start the implementation of Nlog in .net core MVC application. Open visual studio 2019/17 and create the new project as shown below.     Select Asp.net core Web App (Model-View-Controller) and provide the project name in project name text box.   Now on next screen click on create button this will create MVC app with .net core Now go to solution explorer and right click on project and click on Manage Nuget Package. Now in Nuget package manager install below listed Nlog packages.
Read more