Return to the menu   Select another DES Module

Demonstrates ways to select multiple days, weeks, months and days of week

These properties determine if the user can select individual dates, whole weeks, entire months, and days of the week:

  • SelectSingleDates – When true, it allows individual Day Cells to be selectable. When false, you must select by week, month, or day of the week, unless you want absolutely no selection capability. It defaults to true.
  • SelectWeeks – When true, entire weeks can be selected. This shows a column to the left of the week dates for buttons to toggle the selection of the week. If you are already showing the Week Number Column, it adds buttons to that. Buttons are defined with the SelectedWeeksImageUrl, SelectedWeeksText, SelectedWeeksTooltip, and SelectedWeeksSeparator.
    If you want a click on any date to select the entire week, set SelectSingleDates to false in addition to setting SelectWeeks to true.
  • SelectMonth – When true, entire months can be selected. This shows a cell to the left of the week day names to provide the button that toggles the month’s dates. The cell is called the Select Month Cell. Buttons are defined with the SelectedMonthImageUrl, SelectedMonthText, SelectedMonthTooltip, and SelectedMonthSeparator.
  • SelectDOW – “DOW” is short for “Day of Week”. When true, days of the week can be selected. This shows a button in the same cell that contains the names of the days of the week. Buttons are defined with the SelectedDOWImageUrl, SelectedDOWText, SelectedDOWTooltip, and SelectedDOWSeparator.
  • SelectOnlyCurrentMonthOrDOW – When SelectWeeks or SelectDOW are true and this is true, only select dates within the current month being viewed. When false, select all dates represented on the current month view, including those before or after the current month. It defaults to false.
  • RangeMode – When true, selection – whether for individual dates, weeks, or months – will include all dates between the earliest and the latest selected date. It defaults to false.
  • UnselectOthersFirst – This rule unselects cells on a click based on rules that depend on the RangeMode property.
  • ShiftKeyForRange - When true, the user can hold down the shift key and click to extend or remove a range of selections from the last clicked date.
    When false, a range can still be created using RangeMode=true. However, the message center will no longer offer the text from the MessageCenterShiftKey property.
  • MaximumSelectedDates – If greater than 0, the number of maximum days that can be selected. If the user attempts to select more, it will be prevented and optionally an alert box will appear with the text from the MaxAlertExceeded property. If the Message Center is shown, it will show the MessageCenterMaxExceeded property's text.


Controls

Select individual dates (the default)

Previous Month
Next Month
August 2020
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
Click on dates to toggle their selection.


Select individual weeks (but not dates)

SelectWeeks=true SelectSingleDates=false

Previous Month
Next Month
August 2020
SunMonTueWedThuFriSat
>2627282930311
>2345678
>9101112131415
>16171819202122
>23242526272829
>303112345
Click on dates to toggle their selection.

Select days, weeks, day of week, and month

SelectWeeks=true SelectDOW=true SelectMonth=true. The images have also been changed.

Previous Month
Next Month
August 2020
+Sun
v
Mon
v
Tue
v
Wed
v
Thu
v
Fri
v
Sat
v
>2627282930311
>2345678
>9101112131415
>16171819202122
>23242526272829
>303112345
Click on dates to toggle their selection.


Select only one week at a time

SelectWeeks=true SelectSingleDates=false UnselectOthersFirst=true

Previous Month
Next Month
August 2020
SunMonTueWedThuFriSat
>2627282930311
>2345678
>9101112131415
>16171819202122
>23242526272829
>303112345
Click on dates to toggle their selection.


Select a range of dates

RangeMode=true

Previous Month
Next Month
August 2020
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345
Click on dates to toggle their selection.


Select a range of weeks

RangeMode=true SelectWeeks=true SelectSingleDates=false

Previous Month
Next Month
August 2020
SunMonTueWedThuFriSat
>2627282930311
>2345678
>9101112131415
>16171819202122
>23242526272829
>303112345
Click on dates to toggle their selection.

Source Code (C#)

<h2>Select individual dates (the default)</h2>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar1" />
<br/>
<br/>
<h2>Select individual weeks (but not dates)</h2>
<span class="PropertyName">SelectWeeks</span>=true <span class="PropertyName">SelectSingleDates</span>=false<br/><br/>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar2" 
   SelectWeeks="true" SelectSingleDates="false">
</des:MultiSelectionCalendar>
<br/>
<h2>Select days, weeks, day of week, and month</h2>
<span class="PropertyName">SelectWeeks</span>=true <span class="PropertyName">SelectDOW</span>=true <span class="PropertyName">SelectMonth</span>=true. The images have also been changed.<br/><br/>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar3" 
   SelectWeeks="True" SelectDOW="True" SelectMonth="True" 
      SelectDOWImageUrl="{APPEARANCE}/Date And Time/ToggleDOWDroppedWhite.GIF" 
      SelectMonthImageUrl="{APPEARANCE}/Date And Time/ToggleMonthDroppedWhite.GIF" 
      SelectWeeksImageUrl="{APPEARANCE}/Date And Time/ToggleWeekDroppedWhite.GIF"/>
<br/>
<br/>
<h2>Select only one week at a time</h2>
<span class="PropertyName">SelectWeeks</span>=true <span class="PropertyName">SelectSingleDates</span>=false <span class="PropertyName">UnselectOthersFirst</span>=true<br/><br/>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar4" 
   SelectWeeks="true" SelectSingleDates="false" UnselectOthersFirst="true"/>
<br/>
<br/>
<h2>Select a range of dates</h2>
<span class="PropertyName">RangeMode</span>=true<br/><br/>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar5" 
   RangeMode="true" />
<br/>
<br/>
<h2>Select a range of weeks</h2>
<span class="PropertyName">RangeMode</span>=true <span class="PropertyName">SelectWeeks</span>=true <span class="PropertyName">SelectSingleDates</span>=false<br/><br/>
<des:MultiSelectionCalendar runat="server" ID="MultiSelectionCalendar6" 
   RangeMode="true" SelectWeeks="true" SelectSingleDates="false"/>

Return to the menu   Select another DES Module