Add background image in Calendar Day Cell
Calendar is an ASP.NET web server control. We can select an individual date or date range in calendar server control.
Calendar DayRender event occurs when each day is created in the control hierarchy for the calendar control. So we can customize
individual dates of calendar control by writing server code in DayRender event handler section.
DayRender event allow us to apply CSS style on any individual date before calendar display in web page. This technique provide a way to add a background image in any date of calendar control. In the following example code we applied two different images for calendar day cells. One image for calendar regular day cells and another image for only calendar selected day cells. This example also demonstrate us how can we customize selected day cells of calendar control. The background image also tiled in day cell area if image is smaller than day cell size.
Here is is the ASP.NET c# example code to apply background image for calendar specific day cells.
DayRender event allow us to apply CSS style on any individual date before calendar display in web page. This technique provide a way to add a background image in any date of calendar control. In the following example code we applied two different images for calendar day cells. One image for calendar regular day cells and another image for only calendar selected day cells. This example also demonstrate us how can we customize selected day cells of calendar control. The background image also tiled in day cell area if image is smaller than day cell size.
Here is is the ASP.NET c# example code to apply background image for calendar specific day cells.
AddBackgroundImageInCalendarDayCell.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<script runat="server">
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Wrap = true;
e.Cell.Width = 100;
e.Cell.Font.Italic = true;
e.Cell.Font.Size = FontUnit.Large;
e.Cell.BorderColor = System.Drawing.Color.SkyBlue;
e.Cell.ForeColor = System.Drawing.Color.DarkBlue;
e.Cell.Font.Name = "Courier New";
if (e.Day.Date == Calendar1.SelectedDate)
{
e.Cell.Style.Add("background-image", "url(/Image/bg.gif)");
}
else
{
e.Cell.Style.Add("background-image", "url(/Image/cfbodybg.gif)");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to add background image in Calendar Day Cell</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:SlateBlue; font-style:italic;">
How to add background image in Calendar Day Cell
</h2>
<hr width="475" 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"
>
<DayHeaderStyle
BackColor="OliveDrab"
/>
<DayStyle
BorderColor="CadetBlue"
BorderWidth="1"
Font-Bold="true"
Font-Italic="true"
Font-Size="Large"
Height="35"
/>
<NextPrevStyle
Font-Italic="true"
Font-Names="Arial CE"
/>
<OtherMonthDayStyle BackColor="Navy" />
<SelectedDayStyle
BackColor="White"
BorderColor="Snow"
/>
<TitleStyle
BackColor="Crimson"
Height="36"
Font-Size="Large"
Font-Names="Courier New Baltic"
/>
</asp:Calendar>
</div>
</form>
</body>
</html>


