Telerik UI for Windows 8 HTML

This help article will introduce you to the configuration options of RadCalendar.

Setting culture

You can explicitly set culture to RadCalendar through its culture property. Valid values are represented as a BCP-47 language tag, e.g. "fr-FR". For more information regarding Telerik culture support you can visit this article: Culture Support.

Changing the culture results in translating the day, week and month names, as well as ordering the week days in accordance to the culture. For example, in a calendar using "en-US" culture, the week starts on Sunday, while in a "fr-FR" calendar, the week starts on Monday.

The following sample defines a RadCalendar using French culture:

Setting culture Copy imageCopy
var frCalendar = new Telerik.UI.RadCalendar(document.getElementById("calendar1"), {
    culture: "fr-FR"

Setting min and max date

To limit the range of dates from which the user can select, you can set the min and max properties. min will define the earliest date available for selection and max - the latest. The dates outside of this range will be disabled.

The following example sets min date to be today and max date - three months after today. You can see in the image how the two months at the end of the range look:

Setting min and max date Copy imageCopy
var today = new Date();
var minMaxCalendar = new Telerik.UI.RadCalendar(document.getElementById("calendar2"), {
    min: today,
    max: new Date(today.getFullYear(), today.getMonth() + 3, today.getDate())

Controlling the navigation views

You can choose which view in the calendar to be accessible to the end-user. For example, you may want them to be able to select a month and not display the separate days to them. In this case you can set start="year" and then set depth="year".

The start property defines the view which will be initially visible to the user. It accepts string values from the following list: "month" (default), "year", "decade" and "century".

depth determines the navigation depth. It recognizes the same list of values: "month" (default), "year", "decade" and "century".

You can see the above scenario in the sample below:

Controlling the navigation views Copy imageCopy
var navDepthCalendar = new Telerik.UI.RadCalendar(document.getElementById("calendar3"), {
    start: "year",
    depth: "year"

Footer settings

Controlling footer visibility

You can decide whether RadCalendar's footer is visible or not, by setting footer.enabled property to true or false.

Controlling footer visibility Copy imageCopy
var hiddenFooterCalendar = new Telerik.UI.RadCalendar(document.getElementById("calendar4"), {
    footer: {
        enabled: false

Changing footer text

The footer contains a quick link to today's date. By clicking/tapping it, the end user can navigate to today's date in month view from any other view in the calendar. By default, the link displays today's date, formatted according to the current culture. You can customize the text, shown in the footer by setting its template property. The current date is passed as string variable, named data:

Changing footer text Copy imageCopy
var footerTemplateCalendar = new Telerik.UI.RadCalendar(document.getElementById("calendar5"), {
    footer: {
        template: "Navigate to today: #=new Date(data).toDateString()#"