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.

SunMonTueWedThuFriSat
01 1234567
02 891011121314
03 15161718192021
04 22232425262728
05 2930311234
06 567891011
JanFebMarApr
MayJunJulAug
SepOctNovDec
TodayClear
ASPXCopy 
<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.

SunMonTueWedThuFriSat
44 2627282930311
45 2345678
46 9101112131415
47 16171819202122
48 23242526272829
49 30123456
JanFebMarApr
MayJunJulAug
SepOctNovDec
TodayClear
ASPXCopy 
<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
  
SunMonTueWedThuFriSat
44 2627282930311
45 2345678
46 9101112131415
47 16171819202122
48 23242526272829
49 30      
JanFebMarApr
MayJunJulAug
SepOctNov 
  
SunMonTueWedThuFriSat
49  123456
50 78910111213
51 14151617181920
52 21222324252627
01 28293031   
02        
    
    
   Dec
SunMonTueWedThuFriSat
01     123
02 45678910
03 11121314151617
04 18192021222324
05 25262728293031
06        
Jan   
    
    
SunMonTueWedThuFriSat
06 1234567
07 891011121314
08 15161718192021
09 22232425262728
10 1234567
11 891011121314
 FebMarApr
MayJunJulAug
SepOctNovDec
TodayClear
ASPXCopy 
<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.

SunMonTueWedThuFriSat
44 2627282930311
45 2345678
46 9101112131415
47 16171819202122
48 23242526272829
49 30123456
JanFebMarApr
MayJunJulAug
SepOctNovDec
TodayClear
ASPXC#JSCopy 
<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;
}
Screen Size
Color Themes
Demo QR Code