Default Calendar

The Bootstrap Calendar control allows an end-user to select dates and navigate through months and years. This example demonstrates the Calendar control with default settings.

January 2017
@(Html.DevExpress()
    .BootstrapCalendar("calendarDefault")
    .Value("01/01/2017"))

Multi Select

In this example, the Calendar control allows you to select several dates. Click a date while pressing Ctrl to add an individual date to the selection. You can also use the Shift key to select a range of dates.

@(Html.DevExpress()
    .BootstrapCalendar("multiSelectCalendar")
    .EnableMultiSelect(true))

Multi-Month View

This example illustrates the multi-month view feature. The Calendar control below simultaneously displays multiple months, organizing them into several rows and columns.

@(Html.DevExpress()
    .BootstrapCalendar("multiMonthViewCalendar")
    .Columns(2)
    .Rows(2))

Disabled Dates

In this example, some of the dates displayed by the Calendar control are disabled, so they appear grayed out and cannot be selected. You can disable dates based on custom logic by handling the client customDisabledDate event.

@(Html.DevExpress()
    .BootstrapCalendar("disabledDatesCalendar")
    .ClientSideEvents(events => events.CustomDisabledDate("onCustomDisabledDate")))
function onCustomDisabledDate(args) {
    if(args.date.getDay() == 3)
        args.isDisabled = true;
}
Screen Size
Color Themes
Demo QR Code