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

CalendarBuilder

Methods

Culture(System.String)

Specifies the culture used by the Calendar component.

Parameters

culture - System.String

The culture value.

Example


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

Events(System.Action)

Handles the client-side events of the Calendar.

Parameters

clientEventsAction - System.Action<CalendarEventBuilder>

The action that configures the available events.

Example


             @( Html.Kendo().Calendar()
                        .Name("Calendar")
                        .Events(events =>
                            events.Change("onChange")
                        )
            )

Format(System.String)

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

Parameters

format - System.String

The value of the format.

Example


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

FooterId(System.String)

Sets the template that renders the Calendar footer.

Parameters

id - System.String

The id of the external Kendo UI template.

Example


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

Footer(System.String)

Sets the template that renders the Calendar footer.

Parameters

footer - System.String

The footer content.

Example


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

Footer(System.Boolean)

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

Parameters

footer - System.Boolean

The value that configures the visibility of the footer.

Example


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

Depth(Kendo.Mvc.UI.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.

Parameters

depth - CalendarView

The value that configures the depth.

Example


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

Start(Kendo.Mvc.UI.CalendarView)

Specifies the "start" view.

Parameters

start - CalendarView

The enum value that configures the "start" view.

Example


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

Selectable(System.String)

Specifies the selection mode.

Parameters

selectable - System.String

The value that configures the selection mode.

Example


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

SelectDates(System.Collections.Generic.IList)

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

Parameters

selectDates - System.Collections.Generic.IList<DateTime>

List of System.DateTime objects.

Example


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

MonthTemplateId(System.String)

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

Parameters

id - System.String

The id of the external Kendo UI template.

Example


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

MonthTemplate(System.String)

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

Parameters

content - System.String

The value that configures the template.

Example


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

MonthTemplate(System.Action)

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

Parameters

monthTemplateAction - System.Action<MonthTemplateBuilder>

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

Example


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

Messages(System.Action)

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

Parameters

configurator - System.Action<CalendarMessagesSettingsBuilder>

The configurator for the messages settings.

Example


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

Min(System.String)

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

Parameters

date - System.String

The value that configures minimum date.

Example


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

Max(System.String)

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

Parameters

date - System.String

The value that configures maximum date.

Example


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

Min(System.DateTime)

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

Parameters

date - System.DateTime

The value that configures minimum date.

Example


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

Max(System.DateTime)

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

Parameters

date - System.DateTime

The value that configures maximum date.

Example


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

WeekNumber(System.Boolean)

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

Parameters

weekNumber - System.Boolean

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

Example


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

Value(System.Nullable)

Sets the selected date in the Calendar.

Parameters

date - System.Nullable<DateTime>

The DateTime value that sets the selected date.

Example


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

Value(System.String)

Sets the selected date in the Calendar.

Parameters

date - System.String

The value that sets the selected date.

Example


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

Selection(System.Action)

Configures the selection settings of the Calendar.

Parameters

selectionAction - System.Action<CalendarSelectionSettingsBuilder>

The action that configures the selection settings.

Example


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

DisableDates(System.Collections.Generic.IEnumerable)

Specifies the disabled dates in the Calendar component.

Parameters

disableDates - System.Collections.Generic.IEnumerable<String>

The array of dates that must be disabled.

Example


             @( Html.Kendo().Calendar()
                        .Name("calendar")
                        .DisableDates(new string[]{ "we", "th" })
            )

DisableDates(System.DayOfWeek[])

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

Parameters

days - System.DayOfWeek[]

The array of DayOfWeek enums.

Example


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

DisableDates(System.String)

Parameters

handler - System.String

ComponentType(System.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.

Parameters

value - System.String

The value that configures the component type option.

Example


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

Range(System.Action)

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

Parameters

configurator - System.Action<CalendarRangeSettingsBuilder>

The configurator for the range settings.

Example


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

ShowOtherMonthDays(System.Boolean)

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

Parameters

value - System.Boolean

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

Example


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

CenturyCellsFormat(Kendo.Mvc.UI.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.

Parameters

value - CenturyCellsFormats

The enum value that configures the century cells format.

Example


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

AllowReverse(System.Boolean)

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".

Parameters

value - System.Boolean

The value that enables a reverse selection.

Example


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

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".

Example


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

ToComponent()

Returns the internal view component.

Name(System.String)

Sets the name of the component.

Parameters

componentName - System.String

The name of the component.

Example


            @(Html.Kendo().Grid<OrderViewModel>()
               .Name("grid")
               .Columns(columns =>
               {
                   columns.Bound(p => p.OrderID).Filterable(false);
                   columns.Bound(p => p.Freight);  
               })
               .DataSource(dataSource => dataSource
                   .Ajax()
                   .PageSize(20)
                   .Read(read => read.Action("Orders_Read", "Grid"))
               )
            )

Deferred(System.Boolean)

Suppress initialization script rendering. Note that this options should be used in conjunction with Kendo.Mvc.UI.Fluent.WidgetFactory.DeferredScripts(System.Boolean)

Parameters

deferred - System.Boolean

ModelMetadata(System.Web.Mvc.ModelMetadata)

Uses the Metadata of the Model.

Parameters

modelMetadata - System.Web.Mvc.ModelMetadata

The metadata set for the Model

HtmlAttributes(System.Object)

Sets the HTML attributes.

Parameters

attributes - System.Object

The HTML attributes.

HtmlAttributes(System.Collections.Generic.IDictionary)

Parameters

attributes - System.Collections.Generic.IDictionary<String,Object>

AsChildComponent()

Render()

Renders the component.

Example


            @(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
            @( Html.Kendo().Grid(Model)
                .Name("grid")
                .DetailTemplate(product => {
                    )
                       Product Details:
                       <div>Product Name: @( product.ProductName )</div>
                       <div>Units In Stock: @( product.UnitsInStock )</div>
                    @(
                })
                .Render();
            )

ToHtmlString()

ToClientTemplate()

In this article
Not finding the help you need?