The Header and Footer areas of Telerik RadCalendar can also be customized using templates. As mentioned before, the Header is the area between the Title and the Main Calendar area, while the Footer is the area below the Main Calendar area.
The header and footer templates can contain regular HTML and are therefore completely customizable to include text, images, hyperlinks, etc.
You can set the templates using the provided template editor for VS.NET:
This will open the template editor, where you can set the template for the header and the footer of Telerik RadCalendar.
The code below shows the definitions of the HeaderTemplate and FooterTemplate in the "Appearance->Seasons" example from the Telerik RadCalendar Quick Start Framework:
<_rad3a_radcalendar navigationprevtext="" titleformat="MMMM yyyy" weekendsettingsid="calendarCheckInVisualSetting1" bordercolor="#ECECEC" navigationnexttext="" borderstyle="Solid" fastnavigationnexttext="" useweeknumbersasselectors="False" titlealign="Center" autopostbackonnavigation="True" othermonthsettingsid="calendarCheckInOtherMonth" borderwidth="0px" selectorvisualsettingsid="calendarCheckInVisualSetting2" enablerowselectors="False" cssclass="calendarWrapper" defaultviewcellsettingsid="calendarCheckInVisualSetting1" autopostbackondayclick="False" enablecolumnselectors="False" fastnavigationnextimage="fastNavRight.gif" id="calendarCheckIn" defaultviewsettingsid="calendarCheckInTableLayout" defaultcellpadding="0" navigationnextimage="arrowRight.gif" fastnavigationprevimage="fastNavLeft.gif" runat="server" titlevisualsettingsid="calendarCheckInTitleBar" fastnavigationprevtext="" skin="Pink" navigationprevimage="arrowLeft.gif" font-names="Arial, Verdana, Tahoma" operationtype="Ajax" forecolor="Black" enablemultiselect="False">
<_asp3a_image imageurl="ExampleFiles/fall_header.gif" width="100%" id="HeaderImage" runat="server"><_rad3a_richuidisplayinfo selectcssclass="radCalSelect" defaultcssclass="radCalDefault" hovercssclass="radCalHover" disablecssclass="radCalDisable" id="calendarCheckInVisualSetting1"><_rad3a_richuidisplayinfo defaultcssclass="DaysOfWeek" id="calendarCheckInVisualSetting2"><_rad3a_richuidisplayinfo selectcssclass="otherMonth" defaultcssclass="otherMonth" hovercssclass="otherMonth" disablecssclass="otherMonth" id="calendarCheckInOtherMonth"><_rad3a_richuidisplayinfo defaultcssclass="titlebar" id="calendarCheckInTitleBar"><_rad3a_richuidisplayinfo defaultcssclass="TableLayout" id="calendarCheckInTableLayout"><_rad3a_radcalendar navigationprevtext="" titleformat="MMMM yyyy" weekendsettingsid="calendarCheckInVisualSetting1" bordercolor="#ECECEC" navigationnexttext="" borderstyle="Solid" fastnavigationnexttext="" useweeknumbersasselectors="False" titlealign="Center" autopostbackonnavigation="True" othermonthsettingsid="calendarCheckInOtherMonth" borderwidth="0px" selectorvisualsettingsid="calendarCheckInVisualSetting2" enablerowselectors="False" cssclass="calendarWrapper" defaultviewcellsettingsid="calendarCheckInVisualSetting1" autopostbackondayclick="False" enablecolumnselectors="False" fastnavigationnextimage="fastNavRight.gif" id="calendarCheckIn" defaultviewsettingsid="calendarCheckInTableLayout" defaultcellpadding="0" navigationnextimage="arrowRight.gif" fastnavigationprevimage="fastNavLeft.gif" runat="server" titlevisualsettingsid="calendarCheckInTitleBar" fastnavigationprevtext="" skin="Pink" navigationprevimage="arrowLeft.gif" font-names="Arial, Verdana, Tahoma" operationtype="Ajax" forecolor="Black" enablemultiselect="False"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" id="FooterImage" runat="server"><_rad3a_radcalendar navigationprevtext="" titleformat="MMMM yyyy" weekendsettingsid="calendarCheckInVisualSetting1" bordercolor="#ECECEC" navigationnexttext="" borderstyle="Solid" fastnavigationnexttext="" useweeknumbersasselectors="False" titlealign="Center" autopostbackonnavigation="True" othermonthsettingsid="calendarCheckInOtherMonth" borderwidth="0px" selectorvisualsettingsid="calendarCheckInVisualSetting2" enablerowselectors="False" cssclass="calendarWrapper" defaultviewcellsettingsid="calendarCheckInVisualSetting1" autopostbackondayclick="False" enablecolumnselectors="False" fastnavigationnextimage="fastNavRight.gif" id="calendarCheckIn" defaultviewsettingsid="calendarCheckInTableLayout" defaultcellpadding="0" navigationnextimage="arrowRight.gif" fastnavigationprevimage="fastNavLeft.gif" runat="server" titlevisualsettingsid="calendarCheckInTitleBar" fastnavigationprevtext="" skin="Pink" navigationprevimage="arrowLeft.gif" font-names="Arial, Verdana, Tahoma" operationtype="Ajax" forecolor="Black" enablemultiselect="False"><_asp3a_image imageurl="ExampleFiles/fall_header.gif" width="100%" id="HeaderImage" runat="server"><_rad3a_richuidisplayinfo selectcssclass="radCalSelect" defaultcssclass="radCalDefault" hovercssclass="radCalHover" disablecssclass="radCalDisable" id="calendarCheckInVisualSetting1"><_rad3a_richuidisplayinfo defaultcssclass="DaysOfWeek" id="calendarCheckInVisualSetting2"><_rad3a_richuidisplayinfo selectcssclass="otherMonth" defaultcssclass="otherMonth" hovercssclass="otherMonth" disablecssclass="otherMonth" id="calendarCheckInOtherMonth"><_rad3a_richuidisplayinfo defaultcssclass="titlebar" id="calendarCheckInTitleBar"><_rad3a_richuidisplayinfo defaultcssclass="TableLayout" id="calendarCheckInTableLayout"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" id="FooterImage" runat="server"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" id="FooterImage" runat="server"><_asp3a_image imageurl="ExampleFiles/fall_header.gif" width="100%" id="HeaderImage" runat="server"><_rad3a_richuidisplayinfo selectcssclass="radCalSelect" defaultcssclass="radCalDefault" hovercssclass="radCalHover" disablecssclass="radCalDisable" id="calendarCheckInVisualSetting1"><_rad3a_richuidisplayinfo defaultcssclass="DaysOfWeek" id="calendarCheckInVisualSetting2"><_rad3a_richuidisplayinfo selectcssclass="otherMonth" defaultcssclass="otherMonth" hovercssclass="otherMonth" disablecssclass="otherMonth" id="calendarCheckInOtherMonth"><_rad3a_richuidisplayinfo defaultcssclass="titlebar" id="calendarCheckInTitleBar"><_rad3a_richuidisplayinfo defaultcssclass="TableLayout" id="calendarCheckInTableLayout"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" id="FooterImage" runat="server"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" id="FooterImage" runat="server">
| ASPX |
 Copy Code |
|
<rad:radcalendar id="calendarCheckIn" runat="server" Skin="Pink">
<HeaderTemplate>
<asp:Image id="HeaderImage" runat="server" Width="100%" ImageUrl="ExampleFiles/fall_header.gif"></asp:Image>
</HeaderTemplate>
<FooterTemplate>
<asp:Image id="FooterImage" runat="server" Width="100%" ImageUrl="ExampleFiles/fall_footer.gif"></asp:Image>
</FooterTemplate>
</rad:radcalendar> |
<_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" runat="server"><_rad3a_radcalendar navigationprevtext="" titleformat="MMMM yyyy" weekendsettingsid="calendarCheckInVisualSetting1" bordercolor="#ECECEC" navigationnexttext="" borderstyle="Solid" fastnavigationnexttext="" useweeknumbersasselectors="False" titlealign="Center" autopostbackonnavigation="True" othermonthsettingsid="calendarCheckInOtherMonth" borderwidth="0px" selectorvisualsettingsid="calendarCheckInVisualSetting2" enablerowselectors="False" cssclass="calendarWrapper" defaultviewcellsettingsid="calendarCheckInVisualSetting1" autopostbackondayclick="False" enablecolumnselectors="False" fastnavigationnextimage="fastNavRight.gif" defaultviewsettingsid="calendarCheckInTableLayout" defaultcellpadding="0" navigationnextimage="arrowRight.gif" fastnavigationprevimage="fastNavLeft.gif" runat="server" titlevisualsettingsid="calendarCheckInTitleBar" fastnavigationprevtext="" skin="Pink" navigationprevimage="arrowLeft.gif" font-names="Arial, Verdana, Tahoma" operationtype="Ajax" forecolor="Black" enablemultiselect="False"><_asp3a_image imageurl="ExampleFiles/fall_footer.gif" width="100%" runat="server">
See Also