I'm trying to make a WebMonthCalendar with multi-selection enabled and catching the selected date-range in Javascript. However, the SelectionChanged event is fired every time you select a date. So when I drag a date selection, the event is called a lot of times. How can I determine if the multiselection is complete?
Hi,
The WebMonthCalendar is not able to detect "end" of range selection, because it can be ended by various situations which are not possible to catch. For example, in case of mouse-drag it can be ended not only by mouse-up, but by mouse-out of control bounds as well. Selection on shift+arrows/page/etc. is ended by last time action-key is pressed, but it is not possible to guess when user will decide to stop pressing keys.
Ok, thats clear.
Is there a way to be able to select a week by clicking on the weeknumber, where the user isn't able to select multiple dates manually? So basicly a way to disable the "SelectionType=Multi" but with the possibility to click on weeknumbers.
Hi Pieter,
If single date selection is set, then multiple dates can not be selected not by user not by codes.You may use Week as SelectionType. Calendar supports selection on week-number click.
Sorry, I forgot to tell that I want to be able to select both a week and a single date, so changing the SelectionType to "Week" isn't going to work for me...
Any other suggestions?
In this case you may process before selection event and cancel it if it does not fit in your criteria.
I wrote an example for you which will disable all selections besides week-number click and single selection.
<script type="text/javascript">function beforeSelectionChange(calendar, args){ var dates = args.get_dates(); var range = args.get_range(); if((!range || range.length < 2) && dates && dates.length == 1) return; var evt = args.get_browserEvent(); if(!evt || evt.ctrlKey || evt.shiftKey || evt.type != 'mousedown') { args.set_cancel(true); return; } var target = evt.target; if(!target) target = evt.srcElement; var css = target ? target.className : null; if(!css || css.indexOf('_WeekNumber') < 0) { args.set_cancel(true); return; }}</script><ig:WebMonthCalendar ID="WebMonthCalendar1" runat="server" SelectionType="Multi" EnableWeekNumbers="true"> <ClientEvents SelectionChanging="beforeSelectionChange" /></ig:WebMonthCalendar>
Thanks! That's working great!