Default Calendar
This example demonstrates the Calendar control with default settings. The Bootstrap Calendar control allows an end-user to select dates and navigate through months and years.
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
<dx:BootstrapCalendar runat="server" SelectedDate="1.1.2017">
</dx:BootstrapCalendar>
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.
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
<dx:BootstrapCalendar runat="server" EnableMultiSelect="true">
</dx:BootstrapCalendar>
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.
- Rows - specifies the number of rows
- Columns - specifies the number of columns
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
| | | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
<dx:BootstrapCalendar runat="server" Columns="2" Rows="2">
</dx:BootstrapCalendar>
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. The control provides two approaches to disabling dates.
| Jan | Feb | Mar | Apr |
| May | Jun | Jul | Aug |
| Sep | Oct | Nov | Dec |
<dx:BootstrapCalendar ID="CalendarDisabledDates" runat="server" OnCustomDisabledDate="Calendar_CustomDisabledDate">
<ClientSideEvents CustomDisabledDate="onCustomDisabledDate" />
</dx:BootstrapCalendar>
protected void Page_Load(object sender, EventArgs e) {
CalendarDisabledDates.DisabledDates.AddRange(GetDisabledDates());
}
public IEnumerable<DateTime> GetDisabledDates() {
List<DateTime> disabledDates = new List<DateTime>();
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 7));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 11));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 13));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 17));
disabledDates.Add(new DateTime(DateTime.Today.Year, DateTime.Today.Month, 19));
return disabledDates;
}
protected void Calendar_CustomDisabledDate(object sender, CalendarCustomDisabledDateEventArgs e) {
if(e.Date.DayOfWeek == DayOfWeek.Wednesday)
e.IsDisabled = true;
}
function onCustomDisabledDate(s, e) {
if(e.date.getDay() == 3)
e.isDisabled = true;
}