Add background image in asp.net Calendar Day Cell

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.

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>

More asp.net examples