MultiSelectCalendar.js 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976
  1. require({cache:{
  2. 'url:dojox/widget/MultiSelectCalendar/MultiSelectCalendar.html':"<table cellspacing=\"0\" cellpadding=\"0\" class=\"dijitCalendarContainer\" role=\"grid\" dojoAttachEvent=\"onkeypress: _onKeyPress\" aria-labelledby=\"${id}_year\">\n\t<thead>\n\t\t<tr class=\"dijitReset dijitCalendarMonthContainer\" valign=\"top\">\n\t\t\t<th class='dijitReset dijitCalendarArrow' dojoAttachPoint=\"decrementMonth\">\n\t\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitCalendarIncrementControl dijitCalendarDecrease\" role=\"presentation\"/>\n\t\t\t\t<span dojoAttachPoint=\"decreaseArrowNode\" class=\"dijitA11ySideArrow\">-</span>\n\t\t\t</th>\n\t\t\t<th class='dijitReset' colspan=\"5\">\n\t\t\t\t<div dojoType=\"dijit.form.DropDownButton\" dojoAttachPoint=\"monthDropDownButton\"\n\t\t\t\t\tid=\"${id}_mddb\" tabIndex=\"-1\">\n\t\t\t\t</div>\n\t\t\t</th>\n\t\t\t<th class='dijitReset dijitCalendarArrow' dojoAttachPoint=\"incrementMonth\">\n\t\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitCalendarIncrementControl dijitCalendarIncrease\" role=\"presentation\"/>\n\t\t\t\t<span dojoAttachPoint=\"increaseArrowNode\" class=\"dijitA11ySideArrow\">+</span>\n\t\t\t</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th class=\"dijitReset dijitCalendarDayLabelTemplate\" role=\"columnheader\"><span class=\"dijitCalendarDayLabel\"></span></th>\n\t\t</tr>\n\t</thead>\n\t<tbody dojoAttachEvent=\"onclick: _onDayClick, onmouseover: _onDayMouseOver, onmouseout: _onDayMouseOut, onmousedown: _onDayMouseDown, onmouseup: _onDayMouseUp\" class=\"dijitReset dijitCalendarBodyContainer\">\n\t\t<tr class=\"dijitReset dijitCalendarWeekTemplate\" role=\"row\">\n\t\t\t<td class=\"dijitReset dijitCalendarDateTemplate\" role=\"gridcell\"><span class=\"dijitCalendarDateLabel\"></span></td>\n\t\t</tr>\n\t</tbody>\n\t<tfoot class=\"dijitReset dijitCalendarYearContainer\">\n\t\t<tr>\n\t\t\t<td class='dijitReset' valign=\"top\" colspan=\"7\">\n\t\t\t\t<h3 class=\"dijitCalendarYearLabel\">\n\t\t\t\t\t<span dojoAttachPoint=\"previousYearLabelNode\" class=\"dijitInline dijitCalendarPreviousYear\"></span>\n\t\t\t\t\t<span dojoAttachPoint=\"currentYearLabelNode\" class=\"dijitInline dijitCalendarSelectedYear\" id=\"${id}_year\"></span>\n\t\t\t\t\t<span dojoAttachPoint=\"nextYearLabelNode\" class=\"dijitInline dijitCalendarNextYear\"></span>\n\t\t\t\t</h3>\n\t\t\t</td>\n\t\t</tr>\n\t</tfoot>\n</table>"}});
  3. define("dojox/widget/MultiSelectCalendar", [
  4. "dojo/main", "dijit",
  5. "dojo/text!./MultiSelectCalendar/MultiSelectCalendar.html",
  6. "dojo/cldr/supplemental",
  7. "dojo/date",
  8. "dojo/date/locale",
  9. "dijit/_Widget", "dijit/_Templated", "dijit/_CssStateMixin", "dijit/form/DropDownButton", "dijit/typematic"],
  10. function(dojo, dijit, template) {
  11. dojo.experimental("dojox.widget.MultiSelectCalendar");
  12. dojo.declare(
  13. "dojox.widget.MultiSelectCalendar",
  14. [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin, dijit._CssStateMixin],
  15. {
  16. // summary:
  17. // A simple GUI for choosing several dates in the context of a monthly calendar.
  18. //
  19. // description:
  20. // A simple GUI for choosing several dates in the context of a monthly calendar.
  21. // This widget serialises its selected dates to ISO dates or ISO ranges of dates,
  22. // depending on developer selection
  23. // Note that it accepts an Array of ISO dates as its input
  24. //
  25. // example:
  26. // | var calendar = new dojox.widget.MultiSelectCalendar({value: ['2011-05-07,'2011-05-08',2011-05-09','2011-05-23']}, dojo.byId("calendarNode"));
  27. //
  28. // example:
  29. // | <div dojoType="dojox.widget.MultiSelectCalendar"></div>
  30. templateString: template,
  31. widgetsInTemplate: true,
  32. // value: Date
  33. // The currently selected Dates, initially set to an empty object to indicate no selection.
  34. value: {},
  35. // datePackage: String
  36. // JavaScript namespace to find Calendar routines. Uses Gregorian Calendar routines
  37. // at dojo.date by default.
  38. datePackage: "dojo.date",
  39. // dayWidth: String
  40. // How to represent the days of the week in the calendar header. See dojo.date.locale
  41. dayWidth: "narrow",
  42. // tabIndex: Integer
  43. // Order fields are traversed when user hits the tab key
  44. tabIndex: "0",
  45. // if returnIsoRanges is true, the selected dates will be returned as ISO ranges
  46. // else each selected date will be returned sequentially
  47. returnIsoRanges : false,
  48. // currentFocus: Date
  49. // Date object containing the currently focused date, or the date which would be focused
  50. // if the calendar itself was focused. Also indicates which year and month to display,
  51. // i.e. the current "page" the calendar is on.
  52. currentFocus: new Date(),
  53. baseClass:"dijitCalendar",
  54. cssStateNodes: {
  55. "decrementMonth": "dijitCalendarArrow",
  56. "incrementMonth": "dijitCalendarArrow",
  57. "previousYearLabelNode": "dijitCalendarPreviousYear",
  58. "nextYearLabelNode": "dijitCalendarNextYear"
  59. },
  60. _areValidDates: function(/*Date*/ value){
  61. // summary:
  62. // Runs various tests on each selected date, checking that they're a valid date, rather
  63. // than blank or NaN.
  64. // tags:
  65. // private
  66. for (var selDate in this.value){
  67. valid = (selDate && !isNaN(selDate) && typeof value == "object" && selDate.toString() != this.constructor.prototype.value.toString());
  68. if(!valid){ return false; }
  69. }
  70. return true;
  71. },
  72. _getValueAttr: function(){
  73. // summary: this method returns the list of selected dates in an array structure
  74. if(this.returnIsoRanges){
  75. datesWithRanges = this._returnDatesWithIsoRanges(this._sort());
  76. return datesWithRanges;
  77. }else{
  78. return this._sort();
  79. }
  80. },
  81. _setValueAttr: function(/*Date|Number|array*/ value, /*Boolean*/ priorityChange){
  82. // summary:
  83. // Support set("value", ...)
  84. // description:
  85. // Set the passed dates to the selected date and updates the value of this widget
  86. // to reflect that
  87. // value:
  88. // Can be a Date, the number of milliseconds since 1970 or an array of ISO dates (['2011-07-01', '2001-06-01']).
  89. // tags:
  90. // protected
  91. //If we are passed an array of ISO dates, we are going to mark each date in the list as selected
  92. //We perform the normalization of the passed date
  93. this.value = {};
  94. if(dojo.isArray(value)) {
  95. dojo.forEach(value,function(element, i){
  96. //Each element of the array could be a date or a date range
  97. var slashPosition = element.indexOf("/");
  98. if(slashPosition == -1){
  99. //The element is a single date
  100. this.value[element] = 1;
  101. }else{
  102. //We have a slash somewhere in the string so this is an ISO date range
  103. var dateA=new dojo.date.stamp.fromISOString(element.substr(0,10));
  104. var dateB=new dojo.date.stamp.fromISOString(element.substr(11,10));
  105. this.toggleDate(dateA,[],[]);
  106. if((dateA - dateB) > 0){
  107. //We select the first date then the rest is handled as if we had selected a range
  108. this._addToRangeRTL(dateA, dateB, [], []);
  109. }else{
  110. //We select the first date then the rest is handled as if we had selected a range
  111. this._addToRangeLTR(dateA, dateB, [], []);
  112. }
  113. }
  114. },this);
  115. if(value.length > 0){
  116. this.focusOnLastDate(value[value.length-1]);
  117. }
  118. }else{
  119. if(value){
  120. // convert from Number to Date, or make copy of Date object so that setHours() call below
  121. // doesn't affect original value
  122. value = new this.dateClassObj(value);
  123. }
  124. if(this._isValidDate(value)){
  125. value.setHours(1, 0, 0, 0); // round to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
  126. if(!this.isDisabledDate(value, this.lang)){
  127. dateIndex = dojo.date.stamp.toISOString(value).substring(0,10);
  128. this.value[dateIndex] = 1;
  129. // Set focus cell to the new value. Arguably this should only happen when there isn't a current
  130. // focus point. This will also repopulate the grid, showing the new selected value (and possibly
  131. // new month/year).
  132. this.set("currentFocus", value);
  133. if(priorityChange || typeof priorityChange == "undefined"){
  134. this.onChange(this.get('value'));
  135. this.onValueSelected(this.get('value')); // remove in 2.0
  136. }
  137. }
  138. }
  139. }
  140. this._populateGrid();
  141. },
  142. focusOnLastDate : function(lastElement){
  143. //We put the focus on the last date so that when the user re-clicks on the calendar it will be
  144. //on the proper month
  145. var slashPositionLastDate = lastElement.indexOf("/");
  146. var dateA,dateB;
  147. if(slashPositionLastDate == -1){
  148. //This is a singleDate
  149. lastDate = lastElement;
  150. }else{
  151. dateA=new dojo.date.stamp.fromISOString(lastElement.substr(0,10));
  152. dateB=new dojo.date.stamp.fromISOString(lastElement.substr(11,10));
  153. if((dateA - dateB) > 0){
  154. lastDate = dateA;
  155. }else{
  156. lastDate = dateB;
  157. }
  158. }
  159. this.set("currentFocus", lastDate);
  160. },
  161. _isValidDate: function(/*Date*/ value){
  162. // summary:
  163. // Runs various tests on the value, checking that it's a valid date, rather
  164. // than blank or NaN.
  165. // tags:
  166. // private
  167. return value && !isNaN(value) && typeof value == "object" &&
  168. value.toString() != this.constructor.prototype.value.toString();
  169. },
  170. _setText: function(node, text){
  171. // summary:
  172. // This just sets the content of node to the specified text.
  173. // Can't do "node.innerHTML=text" because of an IE bug w/tables, see #3434.
  174. // tags:
  175. // private
  176. while(node.firstChild){
  177. node.removeChild(node.firstChild);
  178. }
  179. node.appendChild(dojo.doc.createTextNode(text));
  180. },
  181. _populateGrid: function(){
  182. // summary:
  183. // Fills in the calendar grid with each day (1-31)
  184. // tags:
  185. // private
  186. var month = new this.dateClassObj(this.currentFocus);
  187. month.setDate(1);
  188. var firstDay = month.getDay(),
  189. daysInMonth = this.dateFuncObj.getDaysInMonth(month),
  190. daysInPreviousMonth = this.dateFuncObj.getDaysInMonth(this.dateFuncObj.add(month, "month", -1)),
  191. today = new this.dateClassObj(),
  192. dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang);
  193. if(dayOffset > firstDay){ dayOffset -= 7; }
  194. //List of all 42 displayed days in the calendar
  195. this.listOfNodes = dojo.query(".dijitCalendarDateTemplate", this.domNode);
  196. // Iterate through dates in the calendar and fill in date numbers and style info
  197. this.listOfNodes.forEach(function(template, i){
  198. i += dayOffset;
  199. var date = new this.dateClassObj(month),
  200. number, clazz = "dijitCalendar", adj = 0;
  201. if(i < firstDay){
  202. number = daysInPreviousMonth - firstDay + i + 1;
  203. adj = -1;
  204. clazz += "Previous";
  205. }else if(i >= (firstDay + daysInMonth)){
  206. number = i - firstDay - daysInMonth + 1;
  207. adj = 1;
  208. clazz += "Next";
  209. }else{
  210. number = i - firstDay + 1;
  211. clazz += "Current";
  212. }
  213. if(adj){
  214. date = this.dateFuncObj.add(date, "month", adj);
  215. }
  216. date.setDate(number);
  217. if(!this.dateFuncObj.compare(date, today, "date")){
  218. clazz = "dijitCalendarCurrentDate " + clazz;
  219. }
  220. //If the date falls outside of the min or max constraints, we do nothing
  221. dateIndex = dojo.date.stamp.toISOString(date).substring(0,10);
  222. if(!this.isDisabledDate(date, this.lang)){
  223. //If the node is already selected, the user clicking on it once more will deselect it
  224. //so we will destroy it in the value object. If the date was not previously selected
  225. //The user wants to select it so we add it to the value object
  226. if(this._isSelectedDate(date, this.lang)){
  227. if(this.value[dateIndex]){
  228. clazz = "dijitCalendarSelectedDate " + clazz;
  229. }else{
  230. clazz = clazz.replace("dijitCalendarSelectedDate ","");
  231. }
  232. }
  233. }
  234. if(this._isSelectedDate(date, this.lang)){
  235. clazz = "dijitCalendarBrowsingDate " + clazz;
  236. }
  237. if(this.isDisabledDate(date, this.lang)){
  238. clazz = "dijitCalendarDisabledDate " + clazz;
  239. }
  240. var clazz2 = this.getClassForDate(date, this.lang);
  241. if(clazz2){
  242. clazz = clazz2 + " " + clazz;
  243. }
  244. template.className = clazz + "Month dijitCalendarDateTemplate";
  245. template.dijitDateValue = date.valueOf(); // original code
  246. dojo.attr(template, "dijitDateValue", date.valueOf()); // so I can dojo.query() it
  247. var label = dojo.query(".dijitCalendarDateLabel", template)[0],
  248. text = date.getDateLocalized ? date.getDateLocalized(this.lang) : date.getDate();
  249. this._setText(label, text);
  250. }, this);
  251. // Repopulate month drop down list based on current year.
  252. // Need to do this to hide leap months in Hebrew calendar.
  253. var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month);
  254. this.monthDropDownButton.dropDown.set("months", monthNames);
  255. // Set name of current month and also fill in spacer element with all the month names
  256. // (invisible) so that the maximum width will affect layout. But not on IE6 because then
  257. // the center <TH> overlaps the right <TH> (due to a browser bug).
  258. this.monthDropDownButton.containerNode.innerHTML =
  259. (dojo.isIE == 6 ? "" : "<div class='dijitSpacer'>" + this.monthDropDownButton.dropDown.domNode.innerHTML + "</div>") +
  260. "<div class='dijitCalendarMonthLabel dijitCalendarCurrentMonthLabel'>" + monthNames[month.getMonth()] + "</div>";
  261. // Fill in localized prev/current/next years
  262. var y = month.getFullYear() - 1;
  263. var d = new this.dateClassObj();
  264. dojo.forEach(["previous", "current", "next"], function(name){
  265. d.setFullYear(y++);
  266. this._setText(this[name+"YearLabelNode"],
  267. this.dateLocaleModule.format(d, {selector:'year', locale:this.lang}));
  268. }, this);
  269. },
  270. goToToday: function(){
  271. // summary:
  272. // We go to today but we do no select it
  273. this.set('currentFocus', new this.dateClassObj(), false);
  274. },
  275. constructor: function(/*Object*/args){
  276. var dateClass = (args.datePackage && (args.datePackage != "dojo.date"))? args.datePackage + ".Date" : "Date";
  277. this.dateClassObj = dojo.getObject(dateClass, false);
  278. this.datePackage = args.datePackage || this.datePackage;
  279. this.dateFuncObj = dojo.getObject(this.datePackage, false);
  280. this.dateLocaleModule = dojo.getObject(this.datePackage + ".locale", false);
  281. },
  282. buildRendering: function(){
  283. this.inherited(arguments);
  284. dojo.setSelectable(this.domNode, false);
  285. var cloneClass = dojo.hitch(this, function(clazz, n){
  286. var template = dojo.query(clazz, this.domNode)[0];
  287. for(var i=0; i<n; i++){
  288. template.parentNode.appendChild(template.cloneNode(true));
  289. }
  290. });
  291. // clone the day label and calendar day templates 6 times to make 7 columns
  292. cloneClass(".dijitCalendarDayLabelTemplate", 6);
  293. cloneClass(".dijitCalendarDateTemplate", 6);
  294. // now make 6 week rows
  295. cloneClass(".dijitCalendarWeekTemplate", 5);
  296. // insert localized day names in the header
  297. var dayNames = this.dateLocaleModule.getNames('days', this.dayWidth, 'standAlone', this.lang);
  298. var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang);
  299. dojo.query(".dijitCalendarDayLabel", this.domNode).forEach(function(label, i){
  300. this._setText(label, dayNames[(i + dayOffset) % 7]);
  301. }, this);
  302. var dateObj = new this.dateClassObj(this.currentFocus);
  303. this.monthDropDownButton.dropDown = new dojox.widget._MonthDropDown({
  304. id: this.id + "_mdd",
  305. onChange: dojo.hitch(this, "_onMonthSelect")
  306. });
  307. this.set('currentFocus', dateObj, false); // draw the grid to the month specified by currentFocus
  308. // Set up repeating mouse behavior for increment/decrement of months/years
  309. var _this = this;
  310. var typematic = function(nodeProp, dateProp, adj){
  311. _this._connects.push(
  312. dijit.typematic.addMouseListener(_this[nodeProp], _this, function(count){
  313. if(count >= 0){ _this._adjustDisplay(dateProp, adj); }
  314. }, 0.8, 500)
  315. );
  316. };
  317. typematic("incrementMonth", "month", 1);
  318. typematic("decrementMonth", "month", -1);
  319. typematic("nextYearLabelNode", "year", 1);
  320. typematic("previousYearLabelNode", "year", -1);
  321. },
  322. _adjustDisplay: function(/*String*/ part, /*int*/ amount){
  323. // summary:
  324. // Moves calendar forwards or backwards by months or years
  325. // part:
  326. // "month" or "year"
  327. // amount:
  328. // Number of months or years
  329. // tags:
  330. // private
  331. this._setCurrentFocusAttr(this.dateFuncObj.add(this.currentFocus, part, amount));
  332. },
  333. _setCurrentFocusAttr: function(/*Date*/ date, /*Boolean*/ forceFocus){
  334. // summary:
  335. // If the calendar currently has focus, then focuses specified date,
  336. // changing the currently displayed month/year if necessary.
  337. // If the calendar doesn't have focus, updates currently
  338. // displayed month/year, and sets the cell that will get focus.
  339. // forceFocus:
  340. // If true, will focus() the cell even if calendar itself doesn't have focus
  341. var oldFocus = this.currentFocus,
  342. oldCell = oldFocus ? dojo.query("[dijitDateValue=" + oldFocus.valueOf() + "]", this.domNode)[0] : null;
  343. // round specified value to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
  344. date = new this.dateClassObj(date);
  345. date.setHours(1, 0, 0, 0);
  346. this._set("currentFocus", date);
  347. var currentMonth = dojo.date.stamp.toISOString(date).substring(0,7);
  348. //We only redraw the grid if we're in a new month
  349. if(currentMonth != this.previousMonth){
  350. this._populateGrid();
  351. this.previousMonth = currentMonth;
  352. }
  353. // set tabIndex=0 on new cell, and focus it (but only if Calendar itself is focused)
  354. var newCell = dojo.query("[dijitDateValue=" + date.valueOf() + "]", this.domNode)[0];
  355. newCell.setAttribute("tabIndex", this.tabIndex);
  356. if(this._focused || forceFocus){
  357. newCell.focus();
  358. }
  359. // set tabIndex=-1 on old focusable cell
  360. if(oldCell && oldCell != newCell){
  361. if(dojo.isWebKit){ // see #11064 about webkit bug
  362. oldCell.setAttribute("tabIndex", "-1");
  363. }else{
  364. oldCell.removeAttribute("tabIndex");
  365. }
  366. }
  367. },
  368. focus: function(){
  369. // summary:
  370. // Focus the calendar by focusing one of the calendar cells
  371. this._setCurrentFocusAttr(this.currentFocus, true);
  372. },
  373. _onMonthSelect: function(/*Number*/ newMonth){
  374. // summary:
  375. // Handler for when user selects a month from the drop down list
  376. // tags:
  377. // protected
  378. // move to selected month, bounding by the number of days in the month
  379. // (ex: dec 31 --> jan 28, not jan 31)
  380. this.currentFocus = this.dateFuncObj.add(this.currentFocus, "month",
  381. newMonth - this.currentFocus.getMonth());
  382. this._populateGrid();
  383. },
  384. toggleDate : function(/*date*/ dateToToggle, /*array of dates*/ selectedDates, /*array of dates*/ unselectedDates){
  385. //Obtain CSS class before toggling if necessary
  386. var dateIndex = dojo.date.stamp.toISOString(dateToToggle).substring(0,10);
  387. //If previously selected we unselect and vice-versa
  388. if(this.value[dateIndex]){
  389. this.unselectDate(dateToToggle, unselectedDates);
  390. }else{
  391. this.selectDate(dateToToggle, selectedDates);
  392. }
  393. },
  394. selectDate : function(/*date*/ dateToSelect, /*array of dates*/ selectedDates){
  395. //Selects the passed iso date, changes its class and records it in the selected dates array
  396. var node = this._getNodeByDate(dateToSelect);
  397. var clazz = node.className;
  398. var dateIndex = dojo.date.stamp.toISOString(dateToSelect).substring(0,10);
  399. this.value[dateIndex] = 1;
  400. selectedDates.push(dateIndex);
  401. clazz = "dijitCalendarSelectedDate " + clazz;
  402. //We update CSS class
  403. node.className = clazz;
  404. },
  405. unselectDate : function(/*date*/ dateToUnselect, /*array of dates*/ unselectedDates){
  406. //Unselects the passed iso date, changes its class and records it in the unselected dates array
  407. var node = this._getNodeByDate(dateToUnselect);
  408. var clazz = node.className;
  409. var dateIndex = dojo.date.stamp.toISOString(dateToUnselect).substring(0,10);
  410. delete(this.value[dateIndex]);
  411. unselectedDates.push(dateIndex);
  412. clazz = clazz.replace("dijitCalendarSelectedDate ","");
  413. //We update CSS class
  414. node.className = clazz;
  415. },
  416. _getNodeByDate : function(/*ISO date*/ dateNode){
  417. //return the node that corresponds to the passed ISO date
  418. var firstDate = new this.dateClassObj(this.listOfNodes[0].dijitDateValue);
  419. var difference = Math.abs(dojo.date.difference(firstDate, dateNode, "day"));
  420. return this.listOfNodes[difference];
  421. },
  422. _onDayClick: function(/*Event*/ evt){
  423. // summary:
  424. // Handler for day clicks, selects the date if appropriate
  425. // tags:
  426. // protected
  427. //If we coming out of selecting a range, we need to skip this onDayClick or else we
  428. //are going to deselect a date that has just been selected or deselect one that just was
  429. //selected
  430. dojo.stopEvent(evt);
  431. for(var node = evt.target; node && !node.dijitDateValue; node = node.parentNode);
  432. if(node && !dojo.hasClass(node, "dijitCalendarDisabledDate")){
  433. value = new this.dateClassObj(node.dijitDateValue);
  434. if(!this.rangeJustSelected){
  435. this.toggleDate(value,[],[]);
  436. //To record the date that was selected prior to the one currently selected
  437. //needed in the event we are selecting a range of dates
  438. this.previouslySelectedDay = value;
  439. this.set("currentFocus", value);
  440. this.onValueSelected([dojo.date.stamp.toISOString(value).substring(0,10)]);
  441. }else{
  442. this.rangeJustSelected = false;
  443. this.set("currentFocus", value);
  444. }
  445. }
  446. },
  447. _onDayMouseOver: function(/*Event*/ evt){
  448. // summary:
  449. // Handler for mouse over events on days, sets hovered style
  450. // tags:
  451. // protected
  452. // event can occur on <td> or the <span> inside the td,
  453. // set node to the <td>.
  454. var node =
  455. dojo.hasClass(evt.target, "dijitCalendarDateLabel") ?
  456. evt.target.parentNode :
  457. evt.target;
  458. if(node && (node.dijitDateValue || node == this.previousYearLabelNode || node == this.nextYearLabelNode) ){
  459. dojo.addClass(node, "dijitCalendarHoveredDate");
  460. this._currentNode = node;
  461. }
  462. },
  463. _setEndRangeAttr: function(/*Date*/ value){
  464. // description:
  465. // records the end of a date range
  466. // tags:
  467. // protected
  468. value = new this.dateClassObj(value);
  469. value.setHours(1); // to avoid issues when DST shift occurs at midnight, see #8521, #9366
  470. this.endRange = value;
  471. },
  472. _getEndRangeAttr: function(){
  473. // Returns the EndRange date that is set when selecting a range
  474. var value = new this.dateClassObj(this.endRange);
  475. value.setHours(0, 0, 0, 0); // return midnight, local time for back-compat
  476. // If daylight savings pushes midnight to the previous date, fix the Date
  477. // object to point at 1am so it will represent the correct day. See #9366
  478. if(value.getDate() < this.endRange.getDate()){
  479. value = this.dateFuncObj.add(value, "hour", 1);
  480. }
  481. return value;
  482. },
  483. _onDayMouseOut: function(/*Event*/ evt){
  484. // summary:
  485. // Handler for mouse out events on days, clears hovered style
  486. // tags:
  487. // protected
  488. if(!this._currentNode){ return; }
  489. // if mouse out occurs moving from <td> to <span> inside <td>, ignore it
  490. if(evt.relatedTarget && evt.relatedTarget.parentNode == this._currentNode){ return; }
  491. var cls = "dijitCalendarHoveredDate";
  492. if(dojo.hasClass(this._currentNode, "dijitCalendarActiveDate")) {
  493. cls += " dijitCalendarActiveDate";
  494. }
  495. dojo.removeClass(this._currentNode, cls);
  496. this._currentNode = null;
  497. },
  498. _onDayMouseDown: function(/*Event*/ evt){
  499. var node = evt.target.parentNode;
  500. if(node && node.dijitDateValue){
  501. dojo.addClass(node, "dijitCalendarActiveDate");
  502. this._currentNode = node;
  503. }
  504. //if shift is pressed, we know the user is selecting a range,
  505. //in which case we are going to select a range of date
  506. if(evt.shiftKey && this.previouslySelectedDay){
  507. //necessary to know whether or not we are in the process of selecting a range of dates
  508. this.selectingRange = true;
  509. this.set('endRange', node.dijitDateValue);
  510. this._selectRange();
  511. }else{
  512. this.selectingRange = false;
  513. this.previousRangeStart = null;
  514. this.previousRangeEnd = null;
  515. }
  516. },
  517. _onDayMouseUp: function(/*Event*/ evt){
  518. var node = evt.target.parentNode;
  519. if(node && node.dijitDateValue){
  520. dojo.removeClass(node, "dijitCalendarActiveDate");
  521. }
  522. },
  523. //TODO: use typematic
  524. handleKey: function(/*Event*/ evt){
  525. // summary:
  526. // Provides keyboard navigation of calendar.
  527. // description:
  528. // Called from _onKeyPress() to handle keypress on a stand alone Calendar,
  529. // and also from `dijit.form._DateTimeTextBox` to pass a keypress event
  530. // from the `dijit.form.DateTextBox` to be handled in this widget
  531. // returns:
  532. // False if the key was recognized as a navigation key,
  533. // to indicate that the event was handled by Calendar and shouldn't be propogated
  534. // tags:
  535. // protected
  536. var dk = dojo.keys,
  537. increment = -1,
  538. interval,
  539. newValue = this.currentFocus;
  540. switch(evt.keyCode){
  541. case dk.RIGHT_ARROW:
  542. increment = 1;
  543. //fallthrough...
  544. case dk.LEFT_ARROW:
  545. interval = "day";
  546. if(!this.isLeftToRight()){ increment *= -1; }
  547. break;
  548. case dk.DOWN_ARROW:
  549. increment = 1;
  550. //fallthrough...
  551. case dk.UP_ARROW:
  552. interval = "week";
  553. break;
  554. case dk.PAGE_DOWN:
  555. increment = 1;
  556. //fallthrough...
  557. case dk.PAGE_UP:
  558. interval = evt.ctrlKey || evt.altKey ? "year" : "month";
  559. break;
  560. case dk.END:
  561. // go to the next month
  562. newValue = this.dateFuncObj.add(newValue, "month", 1);
  563. // subtract a day from the result when we're done
  564. interval = "day";
  565. //fallthrough...
  566. case dk.HOME:
  567. newValue = new this.dateClassObj(newValue);
  568. newValue.setDate(1);
  569. break;
  570. case dk.ENTER:
  571. case dk.SPACE:
  572. if(evt.shiftKey && this.previouslySelectedDay){
  573. this.selectingRange = true;
  574. this.set('endRange', newValue);
  575. this._selectRange();
  576. }else{
  577. this.selectingRange = false;
  578. this.toggleDate(newValue,[],[]);
  579. //We record the selected date as the previous one
  580. //In case we are selecting the first date of a range
  581. this.previouslySelectedDay = newValue;
  582. this.previousRangeStart = null;
  583. this.previousRangeEnd = null;
  584. this.onValueSelected([dojo.date.stamp.toISOString(newValue).substring(0,10)]);
  585. }
  586. break;
  587. default:
  588. return true;
  589. }
  590. if(interval){
  591. newValue = this.dateFuncObj.add(newValue, interval, increment);
  592. }
  593. this.set("currentFocus", newValue);
  594. return false;
  595. },
  596. _onKeyPress: function(/*Event*/ evt){
  597. // summary:
  598. // For handling keypress events on a stand alone calendar
  599. if(!this.handleKey(evt)){
  600. dojo.stopEvent(evt);
  601. }
  602. },
  603. _removeFromRangeLTR : function(/*date*/ beginning, /*date*/ end, /*array*/selectedDates, /*array*/unselectedDates){
  604. //In this method we remove some dates from a range from left to right
  605. difference = Math.abs(dojo.date.difference(beginning, end, "day"));
  606. for(var i = 0; i <= difference; i++){
  607. var nextDay = dojo.date.add(beginning, 'day',i);
  608. this.toggleDate(nextDay, selectedDates, unselectedDates);
  609. }
  610. if(this.previousRangeEnd == null){
  611. //necessary to keep track of the previous range's end date
  612. this.previousRangeEnd = end;
  613. }else{
  614. if(dojo.date.compare(end, this.previousRangeEnd, 'date') > 0 )
  615. this.previousRangeEnd = end;
  616. }
  617. if(this.previousRangeStart == null){
  618. //necessary to keep track of the previous range's start date
  619. this.previousRangeStart = end;
  620. }else{
  621. if(dojo.date.compare(end, this.previousRangeStart, 'date') > 0 )
  622. this.previousRangeStart = end;
  623. }
  624. this.previouslySelectedDay = dojo.date.add(nextDay, 'day',1);
  625. },
  626. _removeFromRangeRTL : function(/*date*/ beginning, /*date*/ end, /*array*/selectedDates, /*array*/unselectedDates){
  627. //If the end of the range is earlier than the beginning (back in time),
  628. //we are going to start from the end and move backward
  629. difference = Math.abs(dojo.date.difference(beginning, end, "day"));
  630. for(var i = 0; i <= difference; i++){
  631. var nextDay = dojo.date.add(beginning, 'day',-i);
  632. this.toggleDate(nextDay, selectedDates, unselectedDates);
  633. }
  634. if(this.previousRangeEnd == null){
  635. this.previousRangeEnd = end;
  636. }else{
  637. if(dojo.date.compare(end, this.previousRangeEnd, 'date') < 0 ){
  638. this.previousRangeEnd = end;
  639. }
  640. }
  641. if(this.previousRangeStart == null){
  642. this.previousRangeStart = end;
  643. }else{
  644. if(dojo.date.compare(end, this.previousRangeStart, 'date') < 0 ){
  645. this.previousRangeStart = end;
  646. }
  647. }
  648. this.previouslySelectedDay = dojo.date.add(nextDay, 'day',-1);
  649. },
  650. _addToRangeRTL : function(/*date*/ beginning, /*date*/ end, /*array*/selectedDates, /*array*/unselectedDates){
  651. difference = Math.abs(dojo.date.difference(beginning, end, "day"));
  652. //If the end of the range is earlier than the beginning (back in time),
  653. //we are going to start from the end and move backward
  654. for(var i = 1; i <= difference; i++){
  655. var nextDay = dojo.date.add(beginning, 'day',-i);
  656. this.toggleDate(nextDay, selectedDates, unselectedDates);
  657. }
  658. if(this.previousRangeStart == null){
  659. this.previousRangeStart = end;
  660. }else{
  661. if(dojo.date.compare(end, this.previousRangeStart, 'date') < 0 ){
  662. this.previousRangeStart = end;
  663. }
  664. }
  665. if(this.previousRangeEnd == null){
  666. this.previousRangeEnd = beginning;
  667. }else{
  668. if(dojo.date.compare(beginning, this.previousRangeEnd, 'date') > 0 ){
  669. this.previousRangeEnd = beginning;
  670. }
  671. }
  672. this.previouslySelectedDay = nextDay;
  673. },
  674. _addToRangeLTR : function(/*date*/ beginning, /*date*/ end, /*array*/selectedDates, /*array*/unselectedDates){
  675. //If the end of the range is later than the beginning,
  676. //adding dates from left to right
  677. difference = Math.abs(dojo.date.difference(beginning, end, "day"));
  678. for(var i = 1; i <= difference; i++){
  679. var nextDay = dojo.date.add(beginning, 'day',i);
  680. this.toggleDate(nextDay, selectedDates, unselectedDates);
  681. }
  682. if(this.previousRangeStart == null){
  683. this.previousRangeStart = beginning;
  684. }else{
  685. if(dojo.date.compare(beginning, this.previousRangeStart, 'date') < 0 ){
  686. this.previousRangeStart = beginning;
  687. }
  688. }
  689. if(this.previousRangeEnd == null){
  690. this.previousRangeEnd = end;
  691. }else{
  692. if(dojo.date.compare(end, this.previousRangeEnd, 'date') > 0 ){
  693. this.previousRangeEnd = end;
  694. }
  695. }
  696. this.previouslySelectedDay = nextDay;
  697. },
  698. _selectRange : function(){
  699. //This method will toggle the dates in the selected range.
  700. var selectedDates = []; //Will gather the list of ISO dates that are selected
  701. var unselectedDates = []; //Will gather the list of ISO dates that are unselected
  702. var beginning = this.previouslySelectedDay;
  703. var end = this.get('endRange');
  704. if(!this.previousRangeStart && !this.previousRangeEnd){
  705. removingFromRange = false;
  706. }else{
  707. if((dojo.date.compare(end, this.previousRangeStart, 'date') < 0) || (dojo.date.compare(end, this.previousRangeEnd, 'date') > 0)){
  708. //We are adding to range
  709. removingFromRange = false;
  710. }else{// Otherwise we are removing from the range
  711. removingFromRange = true;
  712. }
  713. }
  714. if(removingFromRange == true){
  715. if(dojo.date.compare(end, beginning, 'date') < 0){
  716. //We are removing from the range, starting from the end (Right to left)
  717. this._removeFromRangeRTL(beginning, end, selectedDates, unselectedDates);
  718. }else{
  719. //The end of the range is later in time than the beginning: We go from left to right
  720. this._removeFromRangeLTR(beginning, end, selectedDates, unselectedDates);
  721. }
  722. }else{
  723. //We are adding to the range
  724. if(dojo.date.compare(end, beginning, 'date') < 0){
  725. this._addToRangeRTL(beginning, end, selectedDates, unselectedDates);
  726. }else{
  727. this._addToRangeLTR(beginning, end, selectedDates, unselectedDates);
  728. }
  729. }
  730. //We call the extension point with the changed dates
  731. if(selectedDates.length > 0){
  732. this.onValueSelected(selectedDates);
  733. }
  734. if(unselectedDates.length > 0){
  735. this.onValueUnselected(unselectedDates);
  736. }
  737. this.rangeJustSelected = true; //Indicates that we just selected a range.
  738. },
  739. onValueSelected: function(/*array of ISO dates*/ dates){
  740. // summary:
  741. // Notification that a date cell or more were selected.
  742. // description:
  743. // Passes on the list of ISO dates that are selected
  744. // tags:
  745. // protected
  746. },
  747. onValueUnselected: function(/*array of ISO dates*/ dates){
  748. // summary:
  749. // Notification that a date cell or more were unselected.
  750. // description:
  751. // Passes on the list of ISO dates that are unselected
  752. // tags:
  753. // protected
  754. },
  755. onChange: function(/*Date*/ date){
  756. // summary:
  757. // Called only when the selected date has changed
  758. },
  759. _isSelectedDate: function(/*Date*/ dateObject, /*String?*/ locale){
  760. // summary:
  761. // Returns true if the passed date is part of the selected dates of the calendar
  762. dateIndex = dojo.date.stamp.toISOString(dateObject).substring(0,10);
  763. return this.value[dateIndex];
  764. },
  765. isDisabledDate: function(/*Date*/ dateObject, /*String?*/ locale){
  766. // summary:
  767. // May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
  768. // tags:
  769. // extension
  770. /*=====
  771. return false; // Boolean
  772. =====*/
  773. },
  774. getClassForDate: function(/*Date*/ dateObject, /*String?*/ locale){
  775. // summary:
  776. // May be overridden to return CSS classes to associate with the date entry for the given dateObject,
  777. // for example to indicate a holiday in specified locale.
  778. // tags:
  779. // extension
  780. /*=====
  781. return ""; // String
  782. =====*/
  783. },
  784. _sort : function(){
  785. //This function returns a sorted version of the value array that represents the selected dates.
  786. if(this.value == {}){return [];}
  787. //We create an array of date objects with the dates that were selected by the user.
  788. var selectedDates = [];
  789. for (var selDate in this.value){
  790. selectedDates.push(selDate);
  791. }
  792. //Actual sorting
  793. selectedDates.sort(function(a, b){
  794. var dateA=new Date(a), dateB=new Date(b);
  795. return dateA-dateB;
  796. });
  797. return selectedDates;
  798. },
  799. _returnDatesWithIsoRanges : function(selectedDates /*Array of sorted ISO dates*/){
  800. //this method receives a sorted array of dates and returns an array of dates and date ranges where
  801. //such range exist. For instance when passed with selectedDates = ['2010-06-14', '2010-06-15', '2010-12-25']
  802. //it would return [2010-06-14/2010-06-15, '2010-12-25']
  803. var returnDates = [];
  804. if(selectedDates.length > 1){
  805. //initialisation
  806. var weHaveRange = false,
  807. rangeCount = 0,
  808. startRange = null,
  809. lastDayRange = null,
  810. previousDate = dojo.date.stamp.fromISOString(selectedDates[0]);
  811. for(var i = 1; i < selectedDates.length+1; i++){
  812. currentDate = dojo.date.stamp.fromISOString(selectedDates[i]);
  813. if(weHaveRange){
  814. //We are in the middle of a range
  815. difference = Math.abs(dojo.date.difference(previousDate, currentDate, "day"));
  816. if(difference == 1){
  817. //we continue with the range
  818. lastDayRange = currentDate;
  819. }else{
  820. //end of the range, reset variables for maybe the next range..
  821. range = dojo.date.stamp.toISOString(startRange).substring(0,10)
  822. + "/" + dojo.date.stamp.toISOString(lastDayRange).substring(0,10);
  823. returnDates.push(range);
  824. weHaveRange = false;
  825. }
  826. }else{
  827. //We are not in a range to begin with
  828. difference = Math.abs(dojo.date.difference(previousDate, currentDate, "day"));
  829. if(difference == 1){
  830. //These are two consecutive dates: This is a range!
  831. weHaveRange = true;
  832. startRange = previousDate;
  833. lastDayRange = currentDate;
  834. }else{
  835. //this is a standalone date
  836. returnDates.push(dojo.date.stamp.toISOString(previousDate).substring(0,10));
  837. }
  838. }
  839. previousDate = currentDate;
  840. }
  841. return returnDates;
  842. }else{
  843. //If there's only one selected date we return only it
  844. return selectedDates;
  845. }
  846. }
  847. }
  848. );
  849. //FIXME: can we use dijit.Calendar._MonthDropDown directly?
  850. dojo.declare("dojox.widget._MonthDropDown", [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
  851. // summary:
  852. // The month drop down
  853. // months: String[]
  854. // List of names of months, possibly w/some undefined entries for Hebrew leap months
  855. // (ex: ["January", "February", undefined, "April", ...])
  856. months: [],
  857. templateString: "<div class='dijitCalendarMonthMenu dijitMenu' " +
  858. "dojoAttachEvent='onclick:_onClick,onmouseover:_onMenuHover,onmouseout:_onMenuHover'></div>",
  859. _setMonthsAttr: function(/*String[]*/ months){
  860. this.domNode.innerHTML = dojo.map(months, function(month, idx){
  861. return month ? "<div class='dijitCalendarMonthLabel' month='" + idx +"'>" + month + "</div>" : "";
  862. }).join("");
  863. },
  864. _onClick: function(/*Event*/ evt){
  865. this.onChange(dojo.attr(evt.target, "month"));
  866. },
  867. onChange: function(/*Number*/ month){
  868. // summary:
  869. // Callback when month is selected from drop down
  870. },
  871. _onMenuHover: function(evt){
  872. dojo.toggleClass(evt.target, "dijitCalendarMonthLabelHover", evt.type == "mouseover");
  873. }
  874. });
  875. return dojox.widget.MultiSelectCalendar;
  876. });