New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

CalendarBuilder

Class

Defines the fluent interface for configuring the Calendar.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Syntax:

public class CalendarBuilder : WidgetBuilderBase<Calendar, CalendarBuilder>, IHtmlString

Inheritance: objectWidgetBuilderBase<Calendar, CalendarBuilder>CalendarBuilder

Implements: IHtmlString

Constructors

CalendarBuilder(Calendar)

Initializes a new instance of the Calendar class.

public CalendarBuilder(Calendar component)

Parameters:componentCalendar

The component.

Methods

AllowReverse()

Enables the user to select an end date before the start date. This option is available only when the Selectable() configuration is set to "range".

public CalendarBuilder AllowReverse()

Returns:

CalendarBuilder

Example:

@(Html.Kendo().Calendar()
.Name("calendar")
.Selectable("range")
.AllowReverse()
)

AllowReverse(bool)

Enables the user to select an end date before the start date. This option is available only when the Selectable() configuration is set to "range".

public CalendarBuilder AllowReverse(bool value)

Parameters:valuebool

The value that enables a reverse selection.

Returns:

CalendarBuilder

Example:

@(Html.Kendo().Calendar()
.Name("calendar")
.Selectable("range")
.AllowReverse(true)
)

CenturyCellsFormat(CenturyCellsFormats)

Defines the format of the century cells. "CenturyCellsFormats.Long" - The cells will display a decade range, for example, '2000-2009', '2010-2019', and so on. "CenturyCellsFormats.Short" - The cells will display just the starting year of the decade, for example, '2000', '2010', and so on.

public CalendarBuilder CenturyCellsFormat(CenturyCellsFormats value)

Parameters:valueCenturyCellsFormats

The enum value that configures the century cells format.

Returns:

CalendarBuilder

Example:

@(Html.Kendo().Calendar()
.Name("calendar")
.Start(CalendarView.Century)
.CenturyCellsFormat(CenturyCellsFormats.Short)
)

ComponentType(string)

Specifies the component type of the Calendar. "classic" - Uses the standard rendering of the Calendar. "modern" - Uses a new rendering with a fresh and modern look and feel.

public CalendarBuilder ComponentType(string value)

Parameters:valuestring

The value that configures the component type option.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("calendar")
.ComponentType("modern")
)

Culture(string)

Specifies the culture used by the Calendar component.

public CalendarBuilder Culture(string culture)

Parameters:culturestring

The culture value.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("calendar")
.Culture("de-DE")
)

Depth(CalendarView)

Specifies the navigation depth. Note: The option will not be applied if the Start option is lower than the depth. Always set both and Start() and Depth() options.

public CalendarBuilder Depth(CalendarView depth)

Parameters:depthCalendarView

The value that configures the depth.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Start(CalendarView.Month)
.Depth(CalendarView.Year)
)

DisableDates(params DayOfWeek[])

Specifies the disabled dates in the Calendar component as an array of DayOfWeek enums.

public CalendarBuilder DisableDates(params DayOfWeek[] days)

Parameters:daysDayOfWeek[]

The array of DayOfWeek enums.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("calendar")
.DisableDates(DayofWeek.Saturday, DayOfWeek.Sunday)
)

DisableDates(string)

public CalendarBuilder DisableDates(string handler)

Parameters:handlerstringReturns:

CalendarBuilder

Events(Action<CalendarEventBuilder>)

Handles the client-side events of the Calendar.

public CalendarBuilder Events(Action<CalendarEventBuilder> clientEventsAction)

Parameters:clientEventsActionAction<CalendarEventBuilder>

The action that configures the available events.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Events(events =&gt;
events.Change("onChange")
)
)

Footer(bool)

Enables the Calendar footer. If set to 'false', the footer will not be displayed.

public CalendarBuilder Footer(bool footer)

Parameters:footerbool

The value that configures the visibility of the footer.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Footer(false)
)

Footer(string)

Sets the template that renders the Calendar footer.

public CalendarBuilder Footer(string footer)

Parameters:footerstring

The footer content.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Footer("#= kendo.toString(data, "G") #")
)

FooterId(string)

Sets the template that renders the Calendar footer.

public CalendarBuilder FooterId(string id)

Parameters:idstring

The id of the external Kendo UI template.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.FooterId("footer-template")
)
&lt;script id="footer-template" type="text/x-kendo-template"&gt;
Today - #: kendo.toString(data, "d") #
&lt;/script&gt;

Format(string)

Sets the date format that will be used to parse the Calendar value.

public CalendarBuilder Format(string format)

Parameters:formatstring

The value of the format.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Format("dd/MM/yyyy")
.Value(07/06/2024)
)

Max(DateTime)

Sets the maximum date that can be selected in the Calendar.

public CalendarBuilder Max(DateTime date)

Parameters:dateDateTime

The value that configures maximum date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Max(new DateTime(2024,12,31))
)

Max(string)

Sets the maximum date that can be selected in the Calendar.

public CalendarBuilder Max(string date)

Parameters:datestring

The value that configures maximum date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Max("12/01/2024")
)

Messages(Action<CalendarMessagesSettingsBuilder>)

Defines the localization of the texts that are used in the Calendar.

public CalendarBuilder Messages(Action<CalendarMessagesSettingsBuilder> configurator)

Parameters:configuratorAction<CalendarMessagesSettingsBuilder>

The configurator for the messages settings.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.WeekNumber(true)
.Messages(msg =&gt; msg.NavigateTo("Go to").WeekColumnHeader("Week No."))
)

Min(DateTime)

Sets the minimum date that can be selected in the Calendar.

public CalendarBuilder Min(DateTime date)

Parameters:dateDateTime

The value that configures minimum date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Min(new DateTime(2024,1,1))
)

Min(string)

Sets the minimum date that can be selected in the Calendar.

public CalendarBuilder Min(string date)

Parameters:datestring

The value that configures minimum date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Min("01/01/2024")
)

MonthTemplate(Action<MonthTemplateBuilder>)

Sets the template that renders the cells in the "month" view.

public CalendarBuilder MonthTemplate(Action<MonthTemplateBuilder> monthTemplateAction)

Parameters:monthTemplateActionAction<MonthTemplateBuilder>

The action that configures the template settings of the "month" view.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.MonthTemplate(month =&gt; month.Content("#= data.value #"))
)

MonthTemplate(string)

Sets the template that renders the cells in the "month" view.

public CalendarBuilder MonthTemplate(string content)

Parameters:contentstring

The value that configures the template.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.MonthTemplate("#= data.value #")
)

MonthTemplate<TModel>(TemplateBuilder<TModel>)

Sets the template that renders the cells in the "month" view.

public CalendarBuilder MonthTemplate<TModel>(TemplateBuilder<TModel> template)

Parameters:templateTemplateBuilder<TModel>

The value that configures the template.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.MonthTemplate(Html.Kendo().Template()
.AddHtml("test")
)
)

MonthTemplateId(string)

Sets the template that renders the cells in the "month" view.

public CalendarBuilder MonthTemplateId(string id)

Parameters:idstring

The id of the external Kendo UI template.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.MonthTemplateId("cell-template")
)
&lt;script id="cell-template" type="text/x-kendo-template"&gt;
&lt;div class="#= data.value &lt; 10 ? 'exhibition' : 'party' #"&gt;
#= data.value #
&lt;/div&gt;
&lt;/script&gt;

Range(Action<CalendarRangeSettingsBuilder>)

Specifies an initial range selection. This option is available only when the Selectable() configuration is set to "range".

public CalendarBuilder Range(Action<CalendarRangeSettingsBuilder> configurator)

Parameters:configuratorAction<CalendarRangeSettingsBuilder>

The configurator for the range settings.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("calendar")
.Selectable("range")
.Range(range =&gt; range.Start(new DateTime(2024, 3, 3)).End(new DateTime(2024, 3, 10)))
)

Selectable(string)

Specifies the selection mode.

public CalendarBuilder Selectable(string selectable)

Parameters:selectablestring

The value that configures the selection mode.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Selectable("multiple")
)

SelectDates(IList<DateTime>)

Specifies the dates that must be selected when the multiple selection mode is enabled.

public CalendarBuilder SelectDates(IList<DateTime> selectDates)

Parameters:selectDatesIList<DateTime>

List of DateTime objects.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Selectable("multiple")
.SelectDates(new DateTime[] { new DateTime(2024,7,5), new DateTime(2024,7,10) })
)

Selection(Action<CalendarSelectionSettingsBuilder>)

Configures the selection settings of the Calendar.

public CalendarBuilder Selection(Action<CalendarSelectionSettingsBuilder> selectionAction)

Parameters:selectionActionAction<CalendarSelectionSettingsBuilder>

The action that configures the selection settings.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Selection(s =&gt; s.Action("Save", "Home", new { id = "123" }).Dates(new List&lt;DateTime&gt;(){new DateTime(2024,1,4), new DateTime(2024,1,5)}))
)

ShowOtherMonthDays(bool)

When this option is enabled, the Calendar will render days from the previous and next months in the current view.

public CalendarBuilder ShowOtherMonthDays(bool value)

Parameters:valuebool

The value that configures the visibility of the days from the previous and next months.

Returns:

CalendarBuilder

Example:

@(Html.Kendo().Calendar()
.Name("calendar")
.ShowOtherMonthDays(false)
)

Start(CalendarView)

Specifies the "start" view.

public CalendarBuilder Start(CalendarView start)

Parameters:startCalendarView

The enum value that configures the "start" view.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Start(CalendarView.Month)
)

Value(DateTime?)

Sets the selected date in the Calendar.

public CalendarBuilder Value(DateTime? date)

Parameters:dateDateTime?

The DateTime value that sets the selected date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Value(new DateTime(2024,07,05))
)

Value(string)

Sets the selected date in the Calendar.

public CalendarBuilder Value(string date)

Parameters:datestring

The value that sets the selected date.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.Value("2024/07/05")
)

WeekNumber(bool)

Enabled the week number column. If set to 'true', a week of the year will be shown on the left side of the Calendar.

public CalendarBuilder WeekNumber(bool weekNumber)

Parameters:weekNumberbool

The value that configures the visibility of the week number column.

Returns:

CalendarBuilder

Example:

@( Html.Kendo().Calendar()
.Name("Calendar")
.WeekNumber(true)
)