diff options
Diffstat (limited to 'js/dojo/dojox/widget/Calendar.js')
| -rw-r--r-- | js/dojo/dojox/widget/Calendar.js | 944 |
1 files changed, 944 insertions, 0 deletions
diff --git a/js/dojo/dojox/widget/Calendar.js b/js/dojo/dojox/widget/Calendar.js new file mode 100644 index 0000000..496e7c3 --- /dev/null +++ b/js/dojo/dojox/widget/Calendar.js @@ -0,0 +1,944 @@ +//>>built +// wrapped by build app +define("dojox/widget/Calendar", ["dijit","dojo","dojox","dojo/require!dijit/_Widget,dijit/_Templated,dijit/_Container,dijit/typematic,dojo/date,dojo/date/locale"], function(dijit,dojo,dojox){ +dojo.provide("dojox.widget.Calendar"); +dojo.experimental("dojox.widget.Calendar"); + +dojo.require("dijit._Widget"); +dojo.require("dijit._Templated"); +dojo.require("dijit._Container"); +dojo.require("dijit.typematic"); + +dojo.require("dojo.date"); +dojo.require("dojo.date.locale"); + +dojo.declare("dojox.widget._CalendarBase", [dijit._Widget, dijit._Templated, dijit._Container], { + // summary: + // The Root class for all _Calendar extensions + + // templateString: String + // The template to be used to construct the widget. + templateString: dojo.cache("dojox.widget", "Calendar/Calendar.html", "<div class=\"dojoxCalendar\">\n <div tabindex=\"0\" class=\"dojoxCalendarContainer\" style=\"visibility: visible;\" dojoAttachPoint=\"container\">\n\t\t<div style=\"display:none\">\n\t\t\t<div dojoAttachPoint=\"previousYearLabelNode\"></div>\n\t\t\t<div dojoAttachPoint=\"nextYearLabelNode\"></div>\n\t\t\t<div dojoAttachPoint=\"monthLabelSpacer\"></div>\n\t\t</div>\n <div class=\"dojoxCalendarHeader\">\n <div>\n <div class=\"dojoxCalendarDecrease\" dojoAttachPoint=\"decrementMonth\"></div>\n </div>\n <div class=\"\">\n <div class=\"dojoxCalendarIncrease\" dojoAttachPoint=\"incrementMonth\"></div>\n </div>\n <div class=\"dojoxCalendarTitle\" dojoAttachPoint=\"header\" dojoAttachEvent=\"onclick: onHeaderClick\">\n </div>\n </div>\n <div class=\"dojoxCalendarBody\" dojoAttachPoint=\"containerNode\"></div>\n <div class=\"\">\n <div class=\"dojoxCalendarFooter\" dojoAttachPoint=\"footer\"> \n </div>\n </div>\n </div>\n</div>\n"), + + // _views: Array + // The list of mixin views available on this calendar. + _views: null, + + // useFx: Boolean + // Specifies if visual effects should be applied to the widget. + // The default behavior of the widget does not contain any effects. + // The dojox.widget.CalendarFx package is needed for these. + useFx: true, + + // widgetsInTemplate: Boolean + // This widget is a container of other widgets, so this is true. + widgetsInTemplate: true, + + // value: Date + // The currently selected Date + value: new Date(), + + constraints: null, + + // footerFormat: String + // The date format of the date displayed in the footer. Can be + // 'short', 'medium', and 'long' + footerFormat: "medium", + + constructor: function(){ + this._views = []; + this.value = new Date(); + }, + + postMixInProperties: function(){ + var c = this.constraints; + if(c){ + var fromISO = dojo.date.stamp.fromISOString; + if(typeof c.min == "string"){ + c.min = fromISO(c.min); + } + if(typeof c.max == "string"){ + c.max = fromISO(c.max); + } + } + this.value = this.parseInitialValue(this.value); + }, + + parseInitialValue: function(value){ + if (!value || value === -1){ + return new Date(); + }else if(value.getFullYear){ + return value; + }else if (!isNaN(value)) { + if (typeof this.value == "string") { + value = parseInt(value); + } + value = this._makeDate(value); + } + return value; + }, + + _makeDate: function(value){ + return value;//new Date(value); + }, + + postCreate: function(){ + // summary: + // Instantiates the mixin views + + this.displayMonth = new Date(this.get('value')); + + if(this._isInvalidDate(this.displayMonth)){ + this.displayMonth = new Date(); + } + + var mixin = { + parent: this, + _getValueAttr: dojo.hitch(this, function(){return new Date(this._internalValue || this.value);}), + _getDisplayMonthAttr: dojo.hitch(this, function(){return new Date(this.displayMonth);}), + _getConstraintsAttr: dojo.hitch(this, function(){return this.constraints;}), + getLang: dojo.hitch(this, function(){return this.lang;}), + isDisabledDate: dojo.hitch(this, this.isDisabledDate), + getClassForDate: dojo.hitch(this, this.getClassForDate), + addFx: this.useFx ? dojo.hitch(this, this.addFx) : function(){} + }; + + //Add the mixed in views. + dojo.forEach(this._views, function(widgetType){ + var widget = new widgetType(mixin, dojo.create('div')); + this.addChild(widget); + + var header = widget.getHeader(); + if(header){ + //place the views's header node in the header of the main widget + this.header.appendChild(header); + + //hide the header node of the widget + dojo.style(header, "display", "none"); + } + //Hide all views + dojo.style(widget.domNode, "visibility", "hidden"); + + //Listen for the values in a view to be selected + dojo.connect(widget, "onValueSelected", this, "_onDateSelected"); + widget.set("value", this.get('value')); + }, this); + + if(this._views.length < 2){ + dojo.style(this.header, "cursor", "auto"); + } + + this.inherited(arguments); + + // Cache the list of children widgets. + this._children = this.getChildren(); + + this._currentChild = 0; + + //Populate the footer with today's date. + var today = new Date(); + + this.footer.innerHTML = "Today: " + + dojo.date.locale.format(today, { + formatLength:this.footerFormat, + selector:'date', + locale:this.lang}); + + dojo.connect(this.footer, "onclick", this, "goToToday"); + + var first = this._children[0]; + + dojo.style(first.domNode, "top", "0px"); + dojo.style(first.domNode, "visibility", "visible"); + + var header = first.getHeader(); + if(header){ + dojo.style(first.getHeader(), "display", ""); + } + + dojo[first.useHeader ? "removeClass" : "addClass"](this.container, "no-header"); + + first.onDisplay(); + + 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); + this._updateTitleStyle(); + }, + + addFx: function(query, fromNode){ + // Stub function than can be overridden to add effects. + }, + + _isInvalidDate: function(/*Date*/ value){ + // summary: + // Runs various tests on the value, checking for invalid conditions + // tags: + // private + return !value || isNaN(value) || typeof value != "object" || value.toString() == this._invalidDate; + }, + + _setValueAttr: 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(!value){ + value = new Date(); + } + if(!value["getFullYear"]){ + value = dojo.date.stamp.fromISOString(value + ""); + } + if(this._isInvalidDate(value)){ + return false; + } + if(!this.value || dojo.date.compare(value, this.value)){ + value = new Date(value); + this.displayMonth = new Date(value); + this._internalValue = value; + if(!this.isDisabledDate(value, this.lang) && this._currentChild == 0){ + this.value = value; + this.onChange(value); + } + if (this._children && this._children.length > 0) { + this._children[this._currentChild].set("value", this.value); + } + return true; + } + return false; + }, + + isDisabledDate: function(/*Date*/date, /*String?*/locale){ + // summary: + // May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend` + var c = this.constraints; + var compare = dojo.date.compare; + return c && (c.min && (compare(c.min, date, "date") > 0) || + (c.max && compare(c.max, date, "date") < 0)); + }, + + onValueSelected: function(/*Date*/date){ + // summary: + // A date cell was selected. It may be the same as the previous value. + }, + + _onDateSelected: function(date, formattedValue, force){ + this.displayMonth = date; + + this.set("value", date) + //Only change the selected value if it was chosen from the + //first child. + if(!this._transitionVert(-1)){ + if(!formattedValue && formattedValue !== 0){ + formattedValue = this.get('value'); + } + this.onValueSelected(formattedValue); + } + + }, + + onChange: function(/*Date*/date){ + // summary: + // Called only when the selected date has changed + }, + + onHeaderClick: function(e){ + // summary: + // Transitions to the next view. + this._transitionVert(1); + }, + + goToToday: function(){ + this.set("value", new Date()); + this.onValueSelected(this.get('value')); + }, + + _transitionVert: function(/*Number*/direction){ + // summary: + // Animates the views to show one and hide another, in a + // vertical direction. + // If 'direction' is 1, then the views slide upwards. + // If 'direction' is -1, the views slide downwards. + var curWidget = this._children[this._currentChild]; + var nextWidget = this._children[this._currentChild + direction]; + if(!nextWidget){return false;} + + dojo.style(nextWidget.domNode, "visibility", "visible"); + + var height = dojo.style(this.containerNode, "height"); + nextWidget.set("value", this.displayMonth); + + if(curWidget.header){ + dojo.style(curWidget.header, "display", "none"); + } + if(nextWidget.header){ + dojo.style(nextWidget.header, "display", ""); + } + dojo.style(nextWidget.domNode, "top", (height * -1) + "px"); + dojo.style(nextWidget.domNode, "visibility", "visible"); + + this._currentChild += direction; + + var height1 = height * direction; + var height2 = 0; + dojo.style(nextWidget.domNode, "top", (height1 * -1) + "px"); + + // summary: Slides two nodes vertically. + var anim1 = dojo.animateProperty({ + node: curWidget.domNode, + properties: {top: height1}, + onEnd: function(){ + dojo.style(curWidget.domNode, "visibility", "hidden"); + } + }); + var anim2 = dojo.animateProperty({ + node: nextWidget.domNode, + properties: {top: height2}, + onEnd: function(){ + nextWidget.onDisplay(); + } + }); + + dojo[nextWidget.useHeader ? "removeClass" : "addClass"](this.container, "no-header"); + + anim1.play(); + anim2.play(); + curWidget.onBeforeUnDisplay() + nextWidget.onBeforeDisplay(); + + this._updateTitleStyle(); + return true; + }, + + _updateTitleStyle: function(){ + dojo[this._currentChild < this._children.length -1 ? "addClass" : "removeClass"](this.header, "navToPanel"); + }, + + _slideTable: function(/*String*/widget, /*Number*/direction, /*Function*/callback){ + // summary: + // Animates the horizontal sliding of a table. + var table = widget.domNode; + + //Clone the existing table + var newTable = table.cloneNode(true); + var left = dojo.style(table, "width"); + + table.parentNode.appendChild(newTable); + + //Place the existing node either to the left or the right of the new node, + //depending on which direction it is to slide. + dojo.style(table, "left", (left * direction) + "px"); + + //Call the function that generally populates the new cloned node with new data. + //It may also attach event listeners. + callback(); + + //Animate the two nodes. + var anim1 = dojo.animateProperty({node: newTable, properties:{left: left * direction * -1}, duration: 500, onEnd: function(){ + newTable.parentNode.removeChild(newTable); + }}); + var anim2 = dojo.animateProperty({node: table, properties:{left: 0}, duration: 500}); + + anim1.play(); + anim2.play(); + }, + + _addView: function(view){ + //Insert the view at the start of the array. + this._views.push(view); + }, + + getClassForDate: function(/*Date*/dateObject, /*String?*/locale){ + // summary: + // May be overridden to return CSS classes to associate with the date entry for the given dateObject, + // for example to indicate a holiday in specified locale. + +/*===== + return ""; // String +=====*/ + }, + + _adjustDisplay: function(/*String*/part, /*int*/amount, noSlide){ + // summary: + // This function overrides the base function defined in dijit.Calendar. + // It changes the displayed years, months and days depending on the inputs. + var child = this._children[this._currentChild]; + + var month = this.displayMonth = child.adjustDate(this.displayMonth, amount); + + this._slideTable(child, amount, function(){ + child.set("value", month); + }); + } +}); + +dojo.declare("dojox.widget._CalendarView", dijit._Widget, { + // summary: + // Base implementation for all view mixins. + // All calendar views should extend this widget. + headerClass: "", + + useHeader: true, + + cloneClass: function(clazz, n, before){ + // summary: + // Clones all nodes with the class 'clazz' in a widget + var template = dojo.query(clazz, this.domNode)[0]; + var i; + if(!before){ + for(i = 0; i < n; i++){ + template.parentNode.appendChild(template.cloneNode(true)); + } + }else{ + var bNode = dojo.query(clazz, this.domNode)[0]; + for(i = 0; i < n; i++){ + template.parentNode.insertBefore(template.cloneNode(true), bNode); + } + } + }, + + _setText: function(node, text){ + // summary: + // Sets the text inside a node + if(node.innerHTML != text){ + dojo.empty(node); + node.appendChild(dojo.doc.createTextNode(text)); + } + }, + + getHeader: function(){ + // summary: + // Returns the header node of a view. If none exists, + // an empty DIV is created and returned. + return this.header || (this.header = this.header = dojo.create("span", { "class":this.headerClass })); + }, + + onValueSelected: function(date){ + //Stub function called when a date is selected + }, + + adjustDate: function(date, amount){ + // summary: + // Adds or subtracts values from a date. + // The unit, e.g. "day", "month" or "year", is + // specified in the "datePart" property of the + // calendar view mixin. + return dojo.date.add(date, this.datePart, amount); + }, + + onDisplay: function(){ + // summary: + // Stub function that can be used to tell a view when it is shown. + }, + + onBeforeDisplay: function(){ + // summary: + // Stub function that can be used to tell a view it is about to be shown. + }, + + onBeforeUnDisplay: function(){ + // summary: + // Stub function that can be used to tell + // a view when it is no longer shown. + } +}); + +dojo.declare("dojox.widget._CalendarDay", null, { + // summary: + // Mixin for the dojox.widget.Calendar which provides + // the standard day-view. A single month is shown at a time. + parent: null, + + constructor: function(){ + this._addView(dojox.widget._CalendarDayView); + } +}); + +dojo.declare("dojox.widget._CalendarDayView", [dojox.widget._CalendarView, dijit._Templated], { + // summary: View class for the dojox.widget.Calendar. + // Adds a view showing every day of a single month to the calendar. + // This should not be mixed in directly with dojox.widget._CalendarBase. + // Instead, use dojox.widget._CalendarDay + + // templateString: String + // The template to be used to construct the widget. + templateString: dojo.cache("dojox.widget", "Calendar/CalendarDay.html", "<div class=\"dijitCalendarDayLabels\" style=\"left: 0px;\" dojoAttachPoint=\"dayContainer\">\n\t<div dojoAttachPoint=\"header\">\n\t\t<div dojoAttachPoint=\"monthAndYearHeader\">\n\t\t\t<span dojoAttachPoint=\"monthLabelNode\" class=\"dojoxCalendarMonthLabelNode\"></span>\n\t\t\t<span dojoAttachPoint=\"headerComma\" class=\"dojoxCalendarComma\">,</span>\n\t\t\t<span dojoAttachPoint=\"yearLabelNode\" class=\"dojoxCalendarDayYearLabel\"></span>\n\t\t</div>\n\t</div>\n\t<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin: auto;\">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<td class=\"dijitCalendarDayLabelTemplate\"><div class=\"dijitCalendarDayLabel\"></div></td>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody dojoAttachEvent=\"onclick: _onDayClick\">\n\t\t\t<tr class=\"dijitCalendarWeekTemplate\">\n\t\t\t\t<td class=\"dojoxCalendarNextMonth dijitCalendarDateTemplate\">\n\t\t\t\t\t<div class=\"dijitCalendarDateLabel\"></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n"), + + // datePart: String + // Specifies how much to increment the displayed date when the user + // clicks the array button to increment of decrement the view. + datePart: "month", + + // dayWidth: String + // Specifies the type of day name to display. "narrow" causes just one letter to be shown. + dayWidth: "narrow", + + postCreate: function(){ + // summary: + // Constructs the calendar view. + this.cloneClass(".dijitCalendarDayLabelTemplate", 6); + this.cloneClass(".dijitCalendarDateTemplate", 6); + + // now make 6 week rows + this.cloneClass(".dijitCalendarWeekTemplate", 5); + + // insert localized day names in the header + var dayNames = dojo.date.locale.getNames('days', this.dayWidth, 'standAlone', this.getLang()); + var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.getLang()); + + // Set the text of the day labels. + dojo.query(".dijitCalendarDayLabel", this.domNode).forEach(function(label, i){ + this._setText(label, dayNames[(i + dayOffset) % 7]); + }, this); + }, + + onDisplay: function(){ + if(!this._addedFx){ + // Add visual effects to the view, if any has been specified. + this._addedFx = true; + this.addFx(".dijitCalendarDateTemplate div", this.domNode); + } + }, + + _onDayClick: function(e){ + // summary: + // Executed when a day value is clicked. + + // If the user somehow clicked the TR, rather than a + // cell, ignore it. + if(typeof(e.target._date) == "undefined"){return;} + + var date = new Date(this.get("displayMonth")); + + var p = e.target.parentNode; + var c = "dijitCalendar"; + var d = dojo.hasClass(p, c + "PreviousMonth") ? -1 : + (dojo.hasClass(p, c + "NextMonth") ? 1 : 0); + if(d){date = dojo.date.add(date, "month", d)} + date.setDate(e.target._date); + + // If the day is disabled, ignore it + if(this.isDisabledDate(date)){ + dojo.stopEvent(e); + return; + } + this.parent._onDateSelected(date); + }, + + _setValueAttr: function(value){ + //Change the day values + this._populateDays(); + }, + + _populateDays: function(){ + // summary: + // Fills the days of the current month. + + var currentDate = new Date(this.get("displayMonth")); + currentDate.setDate(1); + var firstDay = currentDate.getDay(); + var daysInMonth = dojo.date.getDaysInMonth(currentDate); + var daysInPreviousMonth = dojo.date.getDaysInMonth(dojo.date.add(currentDate, "month", -1)); + var today = new Date(); + var selected = this.get('value'); + + var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.getLang()); + if(dayOffset > firstDay){ dayOffset -= 7; } + + var compareDate = dojo.date.compare; + var templateCls = ".dijitCalendarDateTemplate"; + var selectedCls = "dijitCalendarSelectedDate"; + + var oldDate = this._lastDate; + var redrawRequired = oldDate == null + || oldDate.getMonth() != currentDate.getMonth() + || oldDate.getFullYear() != currentDate.getFullYear(); + this._lastDate = currentDate; + + // If still showing the same month, it's much faster to not redraw, + // and just change the selected date. + if(!redrawRequired){ + dojo.query(templateCls, this.domNode) + .removeClass(selectedCls) + .filter(function(node){ + return node.className.indexOf("dijitCalendarCurrent") > -1 + && node._date == selected.getDate(); + }) + .addClass(selectedCls); + return; + } + + // Iterate through dates in the calendar and fill in date numbers and style info + dojo.query(templateCls, this.domNode).forEach(function(template, i){ + i += dayOffset; + var date = new Date(currentDate); + 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(!compareDate(date, today, "date")){ + clazz = "dijitCalendarCurrentDate " + clazz; + } + + if(!compareDate(date, selected, "date") + && !compareDate(date, selected, "month") + && !compareDate(date, selected, "year") ){ + clazz = selectedCls + " " + clazz; + } + + if(this.isDisabledDate(date, this.getLang())){ + clazz = " dijitCalendarDisabledDate " + clazz; + } + + var clazz2 = this.getClassForDate(date, this.getLang()); + if(clazz2){ + clazz = clazz2 + " " + clazz; + } + + template.className = clazz + "Month dijitCalendarDateTemplate"; + template.dijitDateValue = date.valueOf(); + var label = dojo.query(".dijitCalendarDateLabel", template)[0]; + + this._setText(label, date.getDate()); + + label._date = label.parentNode._date = date.getDate(); + }, this); + + // Fill in localized month name + var monthNames = dojo.date.locale.getNames('months', 'wide', 'standAlone', this.getLang()); + this._setText(this.monthLabelNode, monthNames[currentDate.getMonth()]); + this._setText(this.yearLabelNode, currentDate.getFullYear()); + } +}); + + +dojo.declare("dojox.widget._CalendarMonthYear", null, { + // summary: + // Mixin class for adding a view listing all 12 + // months of the year to the dojox.widget._CalendarBase + + constructor: function(){ + // summary: + // Adds a dojox.widget._CalendarMonthView view to the calendar widget. + this._addView(dojox.widget._CalendarMonthYearView); + } +}); + +dojo.declare("dojox.widget._CalendarMonthYearView", [dojox.widget._CalendarView, dijit._Templated], { + // summary: + // A Calendar view listing the 12 months of the year + + // templateString: String + // The template to be used to construct the widget. + templateString: dojo.cache("dojox.widget", "Calendar/CalendarMonthYear.html", "<div class=\"dojoxCal-MY-labels\" style=\"left: 0px;\"\t\n\tdojoAttachPoint=\"myContainer\" dojoAttachEvent=\"onclick: onClick\">\n\t\t<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin: auto;\">\n\t\t\t\t<tbody>\n\t\t\t\t\t\t<tr class=\"dojoxCal-MY-G-Template\">\n\t\t\t\t\t\t\t\t<td class=\"dojoxCal-MY-M-Template\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"dojoxCalendarMonthLabel\"></div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td class=\"dojoxCal-MY-M-Template\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"dojoxCalendarMonthLabel\"></div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td class=\"dojoxCal-MY-Y-Template\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"dojoxCalendarYearLabel\"></div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t<td class=\"dojoxCal-MY-Y-Template\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"dojoxCalendarYearLabel\"></div>\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t </tr>\n\t\t\t\t\t\t <tr class=\"dojoxCal-MY-btns\">\n\t\t\t\t\t\t \t <td class=\"dojoxCal-MY-btns\" colspan=\"4\">\n\t\t\t\t\t\t \t\t <span class=\"dijitReset dijitInline dijitButtonNode ok-btn\" dojoAttachEvent=\"onclick: onOk\" dojoAttachPoint=\"okBtn\">\n\t\t\t\t\t\t \t \t \t <button\tclass=\"dijitReset dijitStretch dijitButtonContents\">OK</button>\n\t\t\t\t\t\t\t\t </span>\n\t\t\t\t\t\t\t\t <span class=\"dijitReset dijitInline dijitButtonNode cancel-btn\" dojoAttachEvent=\"onclick: onCancel\" dojoAttachPoint=\"cancelBtn\">\n\t\t\t\t\t\t \t \t\t <button\tclass=\"dijitReset dijitStretch dijitButtonContents\">Cancel</button>\n\t\t\t\t\t\t\t\t </span>\n\t\t\t\t\t\t \t </td>\n\t\t\t\t\t\t </tr>\n\t\t\t\t</tbody>\n\t\t</table>\n</div>\n"), + + // datePart: String + // Specifies how much to increment the displayed date when the user + // clicks the array button to increment of decrement the view. + datePart: "year", + + // displayedYears: Number + // The number of years to display at once. + displayedYears: 10, + + useHeader: false, + + postCreate: function(){ + this.cloneClass(".dojoxCal-MY-G-Template", 5, ".dojoxCal-MY-btns"); + this.monthContainer = this.yearContainer = this.myContainer; + + var yClass = "dojoxCalendarYearLabel"; + var dClass = "dojoxCalendarDecrease"; + var iClass = "dojoxCalendarIncrease"; + + dojo.query("." + yClass, this.myContainer).forEach(function(node, idx){ + var clazz = iClass; + switch(idx){ + case 0: + clazz = dClass; + case 1: + dojo.removeClass(node, yClass); + dojo.addClass(node, clazz); + break; + } + }); + // Get the year increment and decrement buttons. + this._decBtn = dojo.query('.' + dClass, this.myContainer)[0]; + this._incBtn = dojo.query('.' + iClass, this.myContainer)[0]; + + dojo.query(".dojoxCal-MY-M-Template", this.domNode) + .filter(function(item){ + return item.cellIndex == 1; + }) + .addClass("dojoxCal-MY-M-last"); + + dojo.connect(this, "onBeforeDisplay", dojo.hitch(this, function(){ + this._cachedDate = new Date(this.get("value").getTime()); + this._populateYears(this._cachedDate.getFullYear()); + this._populateMonths(); + this._updateSelectedMonth(); + this._updateSelectedYear(); + })); + + dojo.connect(this, "_populateYears", dojo.hitch(this, function(){ + this._updateSelectedYear(); + })); + dojo.connect(this, "_populateMonths", dojo.hitch(this, function(){ + this._updateSelectedMonth(); + })); + + this._cachedDate = this.get("value"); + + this._populateYears(); + this._populateMonths(); + + // Add visual effects to the view, if any have been mixed in + this.addFx(".dojoxCalendarMonthLabel,.dojoxCalendarYearLabel ", this.myContainer); + }, + + _setValueAttr: function(value){ + if (value && value.getFullYear()) { + this._populateYears(value.getFullYear()); + } + }, + + getHeader: function(){ + return null; + }, + + _getMonthNames: function(format){ + // summary: + // Returns localized month names + this._monthNames = this._monthNames || dojo.date.locale.getNames('months', format, 'standAlone', this.getLang()); + return this._monthNames; + }, + + _populateMonths: function(){ + // summary: + // Populate the month names using the localized values. + var monthNames = this._getMonthNames('abbr'); + dojo.query(".dojoxCalendarMonthLabel", this.monthContainer).forEach(dojo.hitch(this, function(node, cnt){ + this._setText(node, monthNames[cnt]); + })); + var constraints = this.get('constraints'); + + if(constraints){ + var date = new Date(); + date.setFullYear(this._year); + var min = -1, max = 12; + if(constraints.min){ + var minY = constraints.min.getFullYear(); + if(minY > this._year){ + min = 12; + }else if(minY == this._year){ + min = constraints.min.getMonth(); + } + } + if(constraints.max){ + var maxY = constraints.max.getFullYear(); + if(maxY < this._year){ + max = -1; + }else if(maxY == this._year){ + max = constraints.max.getMonth(); + } + } + + dojo.query(".dojoxCalendarMonthLabel", this.monthContainer) + .forEach(dojo.hitch(this, function(node, cnt){ + dojo[(cnt < min || cnt > max) ? "addClass" : "removeClass"] + (node, 'dijitCalendarDisabledDate'); + })); + } + + var h = this.getHeader(); + if(h){ + this._setText(this.getHeader(), this.get("value").getFullYear()); + } + }, + + _populateYears: function(year){ + // summary: + // Fills the list of years with a range of 12 numbers, with the current year + // being the 6th number. + var constraints = this.get('constraints'); + var dispYear = year || this.get("value").getFullYear(); + var firstYear = dispYear - Math.floor(this.displayedYears/2); + var min = constraints && constraints.min ? constraints.min.getFullYear() : firstYear -10000; + firstYear = Math.max(min, firstYear); + + // summary: Writes the years to display to the view + this._displayedYear = dispYear; + + var yearLabels = dojo.query(".dojoxCalendarYearLabel", this.yearContainer); + + var max = constraints && constraints.max ? constraints.max.getFullYear() - firstYear : yearLabels.length; + var disabledClass = 'dijitCalendarDisabledDate'; + + yearLabels.forEach(dojo.hitch(this, function(node, cnt){ + if(cnt <= max){ + this._setText(node, firstYear + cnt); + dojo.removeClass(node, disabledClass); + }else{ + dojo.addClass(node, disabledClass); + } + })); + + if(this._incBtn){ + dojo[max < yearLabels.length ? "addClass" : "removeClass"](this._incBtn, disabledClass); + } + if(this._decBtn){ + dojo[min >= firstYear ? "addClass" : "removeClass"](this._decBtn, disabledClass); + } + + var h = this.getHeader(); + if(h){ + this._setText(this.getHeader(), firstYear + " - " + (firstYear + 11)); + } + }, + + _updateSelectedYear: function(){ + this._year = String((this._cachedDate || this.get("value")).getFullYear()); + this._updateSelectedNode(".dojoxCalendarYearLabel", dojo.hitch(this, function(node, idx){ + return this._year !== null && node.innerHTML == this._year; + })); + }, + + _updateSelectedMonth: function(){ + var month = (this._cachedDate || this.get("value")).getMonth(); + this._month = month; + this._updateSelectedNode(".dojoxCalendarMonthLabel", function(node, idx){ + return idx == month; + }); + }, + + _updateSelectedNode: function(query, filter){ + var sel = "dijitCalendarSelectedDate"; + dojo.query(query, this.domNode) + .forEach(function(node, idx, array){ + dojo[filter(node, idx, array) ? "addClass" : "removeClass"](node.parentNode, sel); + }); + var selMonth = dojo.query('.dojoxCal-MY-M-Template div', this.myContainer) + .filter(function(node){ + return dojo.hasClass(node.parentNode, sel); + })[0]; + if(!selMonth){return;} + var disabled = dojo.hasClass(selMonth, 'dijitCalendarDisabledDate'); + + dojo[disabled ? 'addClass' : 'removeClass'](this.okBtn, "dijitDisabled"); + }, + + onClick: function(evt){ + // summary: + // Handles clicks on month names + var clazz; + var _this = this; + var sel = "dijitCalendarSelectedDate"; + function hc(c){ + return dojo.hasClass(evt.target, c); + } + + if(hc('dijitCalendarDisabledDate')){ + dojo.stopEvent(evt); + return false; + } + + if(hc("dojoxCalendarMonthLabel")){ + clazz = "dojoxCal-MY-M-Template"; + this._month = evt.target.parentNode.cellIndex + (evt.target.parentNode.parentNode.rowIndex * 2); + this._cachedDate.setMonth(this._month); + this._updateSelectedMonth(); + }else if(hc( "dojoxCalendarYearLabel")){ + clazz = "dojoxCal-MY-Y-Template"; + this._year = Number(evt.target.innerHTML); + this._cachedDate.setYear(this._year); + this._populateMonths(); + this._updateSelectedYear(); + }else if(hc("dojoxCalendarDecrease")){ + this._populateYears(this._displayedYear - 10); + return true; + }else if(hc("dojoxCalendarIncrease")){ + this._populateYears(this._displayedYear + 10); + return true; + }else{ + return true; + } + dojo.stopEvent(evt); + return false; + }, + + onOk: function(evt){ + dojo.stopEvent(evt); + if(dojo.hasClass(this.okBtn, "dijitDisabled")){ + return false; + } + this.onValueSelected(this._cachedDate); + return false; + }, + + onCancel: function(evt){ + dojo.stopEvent(evt); + this.onValueSelected(this.get("value")); + return false; + } +}); + +dojo.declare("dojox.widget.Calendar2Pane", + [dojox.widget._CalendarBase, + dojox.widget._CalendarDay, + dojox.widget._CalendarMonthYear], { + // summary: A Calendar withtwo panes, the second one + // containing both month and year + } +); + +dojo.declare("dojox.widget.Calendar", + [dojox.widget._CalendarBase, + dojox.widget._CalendarDay, + dojox.widget._CalendarMonthYear], { + // summary: The standard Calendar. It includes day and month/year views. + // No visual effects are included. + } +); + +dojo.declare("dojox.widget.DailyCalendar", + [dojox.widget._CalendarBase, + dojox.widget._CalendarDay], { + // summary: A calendar withonly a daily view. + _makeDate: function(value){ + var now = new Date(); + now.setDate(value); + return now; + } + } + +); + +dojo.declare("dojox.widget.MonthAndYearlyCalendar", + [dojox.widget._CalendarBase, + dojox.widget._CalendarMonthYear], { + // summary: A calendar withonly a daily view. + } +); + +}); |