Calendar Header and Footer Templates| UI Control for ASP.NET AJAX, C#, VB.NET

Calendar Header and Footer Templates in ASP.NET

Home > How to > Calendar Header and Footer Templates

Brief Introduction to Calendar Header and Footer

We have talked about how to set asp.net calendar day templates in details in tutorial page: ASP.NET AJAX calendar template day settings. In this tutorial page, we are going to deal with another crucial template setting of Kettic Calendar UI SDK for ASP.NET AJAX, that is - calendar header and footer templates within web ASP.NET project.

The calendar header and footer areas of a web Calendar component can be set and customized using calendar templates. Here we give users the brief introductions to calendar header and footer: the header refers to the area between the calendar title and the main calendar area, which is displayed in image form, while the opposite footer is the area below the main calendar area, and also can be shown with image.

Working like calendar day template of asp.net Calendar control, the header and footer templates still can be capable of containing regular HTML tag, including text, images, hyperlinks, and so on.

Kettic Calendar for ASP.NET AJAX controls offers users not only options for setting calendar templates, but also other components for creating and setting calendar elements, features, pickers and styles.

How to Set Calendar Header and Footer Within ASPX Codes

In this demo part, we will introduce you how to add and insert image to the header and footer in asp.net calendar control. To make the image displaying, you can add pictures to the calendar header template and footer template. Check out these simple operations for setting calendar header and footer:

At first, users need to start Visual Studio 2010, 2012 or any greater version, and create a web ASP.NET application;
And then, within the web ASP.NET project, right click on the Calendar control and choose Edit Template | CalendarHeader or Edit Template | CalendarFooter. This brings you to the template design surface, where you can drag and drop items from the tool box.

The images that will be inserted to display calendar header and footer can be in any form of raster image formats, such as, png, gif, bmp, jpeg as well as tiff. Besides, the image size can be customized and you can be able to decide how many images to insert into the web calendar header and footer.

The following ASPX codes show how to set calendar header and footer template in details. And a sample calendar header and footer image is appended to have a better demonstration. You can also define the template in the web page class in the design time.


<kettic:PerCalendar ID="PerCalendar1" runat="server" TitleFormat="MMM yyyy"             
            &lt;HeaderTemplate>
                <asp:Image ID="CalendarHeader" runat="server" Width="100%" ImageUrl="~/Images/Calendar/header.png" />
            </HeaderTemplate>
            <FooterTemplate>
                <asp:Image ID="CalendarFooter" runat="server" Width="100%" ImageUrl="~/Images/Calendar/footer.png" />
            </FooterTemplate>
</kettic:PerCalendar>

asp.net calendar header and footer template.png

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control

ASP.NET AJAX Calendar UI Control

Overview Getting Started

Calendar element

Title Navigation Controls Column and Row Headers

Pickers

TimePicker DatePicker DateTimePicker MonthYearPicker Using shared Calendar/TimeView Formatting Values

Templates

Calendar Day Templates

Calendar Header and Footer Temlates

Features

Customizing the Day Matrix Multi-View Mode Managing Dates Date Selection

Client Prpgramming

Calendar Event

Server Programming