| New file |
|---|
| 0,0 → 1,214 |
|---|
| if(!dojo._hasResource["dijit._Calendar"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
| dojo._hasResource["dijit._Calendar"] = true; |
| dojo.provide("dijit._Calendar"); |
| |
| dojo.require("dojo.cldr.supplemental"); |
| dojo.require("dojo.date"); |
| dojo.require("dojo.date.locale"); |
| |
| dojo.require("dijit._Widget"); |
| dojo.require("dijit._Templated"); |
| |
| dojo.declare( |
| "dijit._Calendar", |
| [dijit._Widget, dijit._Templated], |
| { |
| /* |
| summary: |
| A simple GUI for choosing a date in the context of a monthly calendar. |
| |
| description: |
| This widget is used internally by other widgets and is not accessible |
| as a standalone widget. |
| This widget can't be used in a form because it doesn't serialize the date to an |
| <input> field. For a form element, use DateTextBox instead. |
| |
| Note that the parser takes all dates attributes passed in the `RFC 3339` format: |
| http://www.faqs.org/rfcs/rfc3339.html (2005-06-30T08:05:00-07:00) |
| so that they are serializable and locale-independent. |
| |
| usage: |
| var calendar = new dijit._Calendar({}, dojo.byId("calendarNode")); |
| -or- |
| <div dojoType="dijit._Calendar"></div> |
| */ |
| templateString:"<table cellspacing=\"0\" cellpadding=\"0\" class=\"dijitCalendarContainer\">\n\t<thead>\n\t\t<tr class=\"dijitReset dijitCalendarMonthContainer\" valign=\"top\">\n\t\t\t<th class='dijitReset' dojoAttachPoint=\"decrementMonth\">\n\t\t\t\t<span class=\"dijitInline dijitCalendarIncrementControl dijitCalendarDecrease\"><span dojoAttachPoint=\"decreaseArrowNode\" class=\"dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarDecreaseInner\">-</span></span>\n\t\t\t</th>\n\t\t\t<th class='dijitReset' colspan=\"5\">\n\t\t\t\t<div dojoAttachPoint=\"monthLabelSpacer\" class=\"dijitCalendarMonthLabelSpacer\"></div>\n\t\t\t\t<div dojoAttachPoint=\"monthLabelNode\" class=\"dijitCalendarMonth\"></div>\n\t\t\t</th>\n\t\t\t<th class='dijitReset' dojoAttachPoint=\"incrementMonth\">\n\t\t\t\t<div class=\"dijitInline dijitCalendarIncrementControl dijitCalendarIncrease\"><span dojoAttachPoint=\"increaseArrowNode\" class=\"dijitA11ySideArrow dijitCalendarIncrementControl dijitCalendarIncreaseInner\">+</span></div>\n\t\t\t</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th class=\"dijitReset dijitCalendarDayLabelTemplate\"><span class=\"dijitCalendarDayLabel\"></span></th>\n\t\t</tr>\n\t</thead>\n\t<tbody dojoAttachEvent=\"onclick: _onDayClick\" class=\"dijitReset dijitCalendarBodyContainer\">\n\t\t<tr class=\"dijitReset dijitCalendarWeekTemplate\">\n\t\t\t<td class=\"dijitReset dijitCalendarDateTemplate\"><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\"></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>\t\n", |
| |
| // value: Date |
| // the currently selected Date |
| value: new Date(), |
| |
| // dayWidth: String |
| // How to represent the days of the week in the calendar header. See dojo.date.locale |
| dayWidth: "narrow", |
| |
| setValue: function(/*Date*/ value){ |
| // summary: set the current date and update the UI. If the date is disabled, the selection will |
| // not change, but the display will change to the corresponding month. |
| if(!this.value || dojo.date.compare(value, this.value)){ |
| value = new Date(value); |
| this.displayMonth = new Date(value); |
| if(!this.isDisabledDate(value, this.lang)){ |
| this.value = value; |
| this.value.setHours(0,0,0,0); |
| this.onChange(this.value); |
| } |
| this._populateGrid(); |
| } |
| }, |
| |
| _setText: function(node, text){ |
| while(node.firstChild){ |
| node.removeChild(node.firstChild); |
| } |
| node.appendChild(document.createTextNode(text)); |
| }, |
| |
| _populateGrid: function(){ |
| var month = this.displayMonth; |
| month.setDate(1); |
| var firstDay = month.getDay(); |
| var daysInMonth = dojo.date.getDaysInMonth(month); |
| var daysInPreviousMonth = dojo.date.getDaysInMonth(dojo.date.add(month, "month", -1)); |
| var today = new Date(); |
| var selected = this.value; |
| |
| var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang); |
| if(dayOffset > firstDay){ dayOffset -= 7; } |
| |
| // Iterate through dates in the calendar and fill in date numbers and style info |
| dojo.query(".dijitCalendarDateTemplate", this.domNode).forEach(function(template, i){ |
| i += dayOffset; |
| var date = new Date(month); |
| var number, clazz = "dijitCalendar", adj = 0; |
| |
| if(i < firstDay){ |
| number = daysInPreviousMonth - firstDay + i + 1; |
| adj = -1; |
| clazz += "Previous"; |
| }else if(i >= (firstDay + daysInMonth)){ |
| number = i - firstDay - daysInMonth + 1; |
| adj = 1; |
| clazz += "Next"; |
| }else{ |
| number = i - firstDay + 1; |
| clazz += "Current"; |
| } |
| |
| if(adj){ |
| date = dojo.date.add(date, "month", adj); |
| } |
| date.setDate(number); |
| |
| if(!dojo.date.compare(date, today, "date")){ |
| clazz = "dijitCalendarCurrentDate " + clazz; |
| } |
| |
| if(!dojo.date.compare(date, selected, "date")){ |
| clazz = "dijitCalendarSelectedDate " + clazz; |
| } |
| |
| if(this.isDisabledDate(date, this.lang)){ |
| clazz = "dijitCalendarDisabledDate " + clazz; |
| } |
| |
| template.className = clazz + "Month dijitCalendarDateTemplate"; |
| template.dijitDateValue = date.valueOf(); |
| var label = dojo.query(".dijitCalendarDateLabel", template)[0]; |
| this._setText(label, date.getDate()); |
| }, this); |
| |
| // Fill in localized month name |
| var monthNames = dojo.date.locale.getNames('months', 'wide', 'standAlone', this.lang); |
| this._setText(this.monthLabelNode, monthNames[month.getMonth()]); |
| |
| // Fill in localized prev/current/next years |
| var y = month.getFullYear() - 1; |
| dojo.forEach(["previous", "current", "next"], function(name){ |
| this._setText(this[name+"YearLabelNode"], |
| dojo.date.locale.format(new Date(y++, 0), {selector:'year', locale:this.lang})); |
| }, this); |
| |
| // Set up repeating mouse behavior |
| var _this = this; |
| var typematic = function(nodeProp, dateProp, adj){ |
| dijit.typematic.addMouseListener(_this[nodeProp], _this, function(count){ |
| if(count >= 0){ _this._adjustDisplay(dateProp, adj); } |
| }, 0.8, 500); |
| }; |
| typematic("incrementMonth", "month", 1); |
| typematic("decrementMonth", "month", -1); |
| typematic("nextYearLabelNode", "year", 1); |
| typematic("previousYearLabelNode", "year", -1); |
| }, |
| |
| postCreate: function(){ |
| dijit._Calendar.superclass.postCreate.apply(this); |
| |
| var cloneClass = dojo.hitch(this, function(clazz, n){ |
| var template = dojo.query(clazz, this.domNode)[0]; |
| for(var i=0; i<n; i++){ |
| template.parentNode.appendChild(template.cloneNode(true)); |
| } |
| }); |
| |
| // clone the day label and calendar day templates 6 times to make 7 columns |
| cloneClass(".dijitCalendarDayLabelTemplate", 6); |
| cloneClass(".dijitCalendarDateTemplate", 6); |
| |
| // now make 6 week rows |
| cloneClass(".dijitCalendarWeekTemplate", 5); |
| |
| // insert localized day names in the header |
| var dayNames = dojo.date.locale.getNames('days', this.dayWidth, 'standAlone', this.lang); |
| var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang); |
| dojo.query(".dijitCalendarDayLabel", this.domNode).forEach(function(label, i){ |
| this._setText(label, dayNames[(i + dayOffset) % 7]); |
| }, this); |
| |
| // Fill in spacer element with all the month names (invisible) so that the maximum width will affect layout |
| var monthNames = dojo.date.locale.getNames('months', 'wide', 'standAlone', this.lang); |
| dojo.forEach(monthNames, function(name){ |
| var monthSpacer = dojo.doc.createElement("div"); |
| this._setText(monthSpacer, name); |
| this.monthLabelSpacer.appendChild(monthSpacer); |
| }, this); |
| |
| this.value = null; |
| this.setValue(new Date()); |
| }, |
| |
| _adjustDisplay: function(/*String*/part, /*int*/amount){ |
| this.displayMonth = dojo.date.add(this.displayMonth, part, amount); |
| this._populateGrid(); |
| }, |
| |
| _onDayClick: function(/*Event*/evt){ |
| var node = evt.target; |
| dojo.stopEvent(evt); |
| while(!node.dijitDateValue){ |
| node = node.parentNode; |
| } |
| if(!dojo.hasClass(node, "dijitCalendarDisabledDate")){ |
| this.setValue(node.dijitDateValue); |
| this.onValueSelected(this.value); |
| } |
| }, |
| |
| onValueSelected: function(/*Date*/date){ |
| //summary: a date cell was selected. It may be the same as the previous value. |
| }, |
| |
| onChange: function(/*Date*/date){ |
| //summary: called only when the selected date has changed |
| }, |
| |
| isDisabledDate: function(/*Date*/dateObject, /*String?*/locale){ |
| // summary: |
| // May be overridden to disable certain dates in the calendar e.g. isDisabledDate=dojo.date.locale.isWeekend |
| return false; // Boolean |
| } |
| } |
| ); |
| |
| } |