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:


<September 2018>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456


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...]