Apply CSS style in C# Microsoft Calendar Individual Day Cell
Calendar is an asp.net web server control. this web server control allow 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 have many built in properties to set or change its day cells text color, background color, border style etc. but calendar control have no property to change its individual day cell or any specific day cell styles programmatically.
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 display in web browser. by using this event we can modify the appearance of specific day cell or cells before it display in web page.
calendar DayRender event allow us to attach a css class for any specific day cell in calendar control. by this way we can apply core css style to specified day cells in 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 demonstrate 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.
<%@ 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>
No comments