Calendar - Special Days and Templates

September, 2016
Autumn
September, 2016
SunMonTueWedThuFriSat
    123
45678910
11
date
13141516
mortgage
18
date
2021222324
252627282930 
       
Autumn
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The following example demonstrates 3 features of Telerik RadCalendar:

  1. Using a custom non-embedded skin
  2. Special day templates - RadCalendar provides a collection of dynamic templates that customize the presentation of calendar days on a "per day" basis. The templates can contain regular HTML and are particularly useful if you want to implement a scheduler-like interface with extra information, such as images illustrating events, links to additional sources, etc.
  3. Header and Footer templates - You can specify different content for the templates of different months and change them from the code-behind. Here, images are changed for every season.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.SpecialDays.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg" style="max-width:757px" runat="server" id="containerDiv">
        <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" runat="server" AutoPostBack="true" Skin="Special"
            EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" EnableMonthYearFastNavigation="false"
            DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="false" OnDefaultViewChanged="RadCalendar1_DefaultViewChanged">
            <HeaderTemplate>
                <asp:Image ID="HeaderImage" runat="server" Width="757" Height="94" Style="display: block"></asp:Image>
            </HeaderTemplate>
            <FooterTemplate>
                <asp:Image ID="FooterImage" runat="server" Width="757" Height="70" Style="display: block"></asp:Image>
            </FooterTemplate>
            <SpecialDays>
                <telerik:RadCalendarDay Date="2009/06/12" Repeatable="DayInMonth" TemplateID="DateTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/06/19" Repeatable="DayInMonth" TemplateID="DateTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/06/17" Repeatable="DayInMonth" TemplateID="MortgageTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/06/8" Repeatable="DayAndMonth" TemplateID="BirthdayTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/08/7" Repeatable="DayAndMonth" TemplateID="BirthdayTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/10/8" Repeatable="DayAndMonth" TemplateID="BirthdayTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2009/12/23" Repeatable="DayAndMonth" TemplateID="BirthdayTemplate">
                </telerik:RadCalendarDay>
                <telerik:RadCalendarDay Date="2010/2/14" Repeatable="DayAndMonth" TemplateID="BirthdayTemplate">
                </telerik:RadCalendarDay>
            </SpecialDays>
            <CalendarDayTemplates>
                <telerik:DayTemplate ID="DateTemplate" runat="server">
                    <Content>
                        <div class="rcTemplate rcDayDate">
                            date
                        </div>
                    </Content>
                </telerik:DayTemplate>
                <telerik:DayTemplate ID="MortgageTemplate" runat="server">
                    <Content>
                        <div class="rcTemplate rcDayMortgage">
                            mortgage
                        </div>
                    </Content>
                </telerik:DayTemplate>
                <telerik:DayTemplate ID="BirthdayTemplate" runat="server">
                    <Content>
                        <div class="rcTemplate rcDayBirthday">
                            birthday
                        </div>
                    </Content>
                </telerik:DayTemplate>
            </CalendarDayTemplates>
        </telerik:RadCalendar>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?