Hover Calendar Demo

This demo illustrates how to add functionality to the Calendar Web control to "highlight" a date with the mouse over it. To demonstrate this, simply move your mouse over the calendar control below:


<November 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789


Source Code
<%@ Import Namespace="System.Drawing" %>
<script language="C#" runat=server>
private void CreateDayEffects(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
   e.Cell.Attributes["onmouseover"] = "this.style.backgroundColor='pink';";
   if (Calendar1.DayStyle.BackColor != Color.Empty)
      e.Cell.Attributes["onmouseout"] = "this.style.backgroundColor='" + 
                 Calendar1.DayStyle.BackColor.ToKnownColor() + "';";
   else
      e.Cell.Attributes["onmouseout"] = "this.style.backgroundColor='';";
}
</script>

<form id="Form1" method="post" runat="server">
   <asp:Calendar id="Calendar1" runat="server"
        OnDayRender="CreateDayEffects">
   </asp:Calendar>
</form>

[Return to the article...]