Apply CSS style in Calendar individual Day Cell
Calendar is an ASP.NET web server control. This web server control
allows us to select an individual date or date range at a time. Calendar
control is rendered as an HTML table and each day of Calendar control contains
a LinkButton control that raises an event when it is clicked.
Calendar control has many built-in properties to set or change its day cell's text color, background color, border style, etc. But Calendar control has no property to change its individual day cell or any specific day cell styles programmatically.
The Calendar DayRender event occurs when each day is created in the control hierarchy of the Calendar control. So it is possible to change the style of any individual day cell in Calendar control before it displays in the web browser. By using this event we can modify the appearance of a specific day cell or multiple cells before it displays on the web page.
The Calendar DayRender event allows us to attach a CSS class for any specific day cell in the Calendar control. In this way, we can apply the core CSS style to specified day cells in the Calendar control. In this example code we applied a mouse hover effect for specific day cells of Calendar control.
The following ASP.NET C# example code demonstrates to us how can we customize the appearance of specified day cells in Calendar control by attaching CSS class to those day cells in an ASP.NET application.
Calendar control has many built-in properties to set or change its day cell's text color, background color, border style, etc. But Calendar control has no property to change its individual day cell or any specific day cell styles programmatically.
The Calendar DayRender event occurs when each day is created in the control hierarchy of the Calendar control. So it is possible to change the style of any individual day cell in Calendar control before it displays in the web browser. By using this event we can modify the appearance of a specific day cell or multiple cells before it displays on the web page.
The Calendar DayRender event allows us to attach a CSS class for any specific day cell in the Calendar control. In this way, we can apply the core CSS style to specified day cells in the Calendar control. In this example code we applied a mouse hover effect for specific day cells of Calendar control.
The following ASP.NET C# example code demonstrates to us how can we customize the appearance of specified day cells in Calendar control by attaching CSS class to those day cells in an ASP.NET application.
CalendarIndividualDayCellCssStyle.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<script runat="server">
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
DateTime stratDate = new DateTime(2011,12,15);;
DateTime endDate = new DateTime(2011,12,24);;
if (e.Day.Date > stratDate && e.Day.Date < endDate)
{
e.Cell.Font.Italic = true;
e.Cell.Font.Size = FontUnit.XLarge;
e.Cell.Font.Strikeout = true;
e.Cell.CssClass = "CustomCellCss";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to use CSS style in Calendar individual Day Cell</title>
<style type="text/css">
.CustomCellCss a:hover
{
background-color:DarkOrange;
padding: 0px 30px 0px 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:SlateBlue; font-style:italic;">
How to use CSS style in Calendar individual Day Cell
</h2>
<hr width="550" align="left" color="SlateGray" />
<asp:Calendar
ID="Calendar1"
runat="server"
NextPrevFormat="FullMonth"
ForeColor="WhiteSmoke"
SelectionMode="Day"
DayNameFormat="Full"
Font-Names="Book Antiqua"
Font-Size="Medium"
OnDayRender="Calendar1_DayRender"
VisibleDate="12/1/2011"
>
<DayHeaderStyle
BackColor="DodgerBlue"
/>
<DayStyle
BackColor="Crimson"
BorderColor="IndianRed"
BorderWidth="1"
Font-Bold="true"
Font-Italic="true"
/>
<NextPrevStyle
Font-Italic="true"
Font-Names="Arial CE"
/>
<SelectedDayStyle
BackColor="Green"
BorderColor="SpringGreen"
/>
<OtherMonthDayStyle BackColor="DarkRed" />
<TitleStyle
BackColor="MidnightBlue"
Height="36"
Font-Size="Large"
Font-Names="Courier New Baltic"
/>
</asp:Calendar>
</div>
</form>
</body>
</html>
