calendar.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

		*/
		cal.renderEvent = new CE(defEvents.RENDER);

		/**
		* Fired just before the Calendar is to be destroyed
		* @event beforeDestroyEvent
		*/
		cal.beforeDestroyEvent = new CE(defEvents.BEFORE_DESTROY);

		/**
		* Fired after the Calendar is destroyed. This event should be used
		* for notification only. When this event is fired, important Calendar instance
		* properties, dom references and event listeners have already been 
		* removed/dereferenced, and hence the Calendar instance is not in a usable 
		* state.
		*
		* @event destroyEvent
		*/
		cal.destroyEvent = new CE(defEvents.DESTROY);

		/**
		* Fired when the Calendar is reset
		* @event resetEvent
		*/
		cal.resetEvent = new CE(defEvents.RESET);

		/**
		* Fired when the Calendar is cleared
		* @event clearEvent
		*/
		cal.clearEvent = new CE(defEvents.CLEAR);

		/**
		* Fired just before the Calendar is to be shown
		* @event beforeShowEvent
		*/
		cal.beforeShowEvent = new CE(defEvents.BEFORE_SHOW);

		/**
		* Fired after the Calendar is shown
		* @event showEvent
		*/
		cal.showEvent = new CE(defEvents.SHOW);

		/**
		* Fired just before the Calendar is to be hidden
		* @event beforeHideEvent
		*/
		cal.beforeHideEvent = new CE(defEvents.BEFORE_HIDE);

		/**
		* Fired after the Calendar is hidden
		* @event hideEvent
		*/
		cal.hideEvent = new CE(defEvents.HIDE);

		/**
		* Fired just before the CalendarNavigator is to be shown
		* @event beforeShowNavEvent
		*/
		cal.beforeShowNavEvent = new CE(defEvents.BEFORE_SHOW_NAV);
	
		/**
		* Fired after the CalendarNavigator is shown
		* @event showNavEvent
		*/
		cal.showNavEvent = new CE(defEvents.SHOW_NAV);
	
		/**
		* Fired just before the CalendarNavigator is to be hidden
		* @event beforeHideNavEvent
		*/
		cal.beforeHideNavEvent = new CE(defEvents.BEFORE_HIDE_NAV);
	
		/**
		* Fired after the CalendarNavigator is hidden
		* @event hideNavEvent
		*/
		cal.hideNavEvent = new CE(defEvents.HIDE_NAV);

		/**
		* Fired just before the CalendarNavigator is to be rendered
		* @event beforeRenderNavEvent
		*/
		cal.beforeRenderNavEvent = new CE(defEvents.BEFORE_RENDER_NAV);

		/**
		* Fired after the CalendarNavigator is rendered
		* @event renderNavEvent
		*/
		cal.renderNavEvent = new CE(defEvents.RENDER_NAV);

		cal.beforeSelectEvent.subscribe(cal.onBeforeSelect, this, true);
		cal.selectEvent.subscribe(cal.onSelect, this, true);
		cal.beforeDeselectEvent.subscribe(cal.onBeforeDeselect, this, true);
		cal.deselectEvent.subscribe(cal.onDeselect, this, true);
		cal.changePageEvent.subscribe(cal.onChangePage, this, true);
		cal.renderEvent.subscribe(cal.onRender, this, true);
		cal.resetEvent.subscribe(cal.onReset, this, true);
		cal.clearEvent.subscribe(cal.onClear, this, true);
	},

	/**
	* The default event handler for clicks on the "Previous Month" navigation UI
	*
	* @method doPreviousMonthNav
	* @param {DOMEvent} e	The DOM event
	* @param {Calendar} cal	A reference to the calendar
	*/
	doPreviousMonthNav : function(e, cal) {
		Event.preventDefault(e);
		// previousMonth invoked in a timeout, to allow
		// event to bubble up, with correct target. Calling
		// previousMonth, will call render which will remove 
		// HTML which generated the event, resulting in an 
		// invalid event target in certain browsers.
		setTimeout(function() {
			cal.previousMonth();
			var navs = Dom.getElementsByClassName(cal.Style.CSS_NAV_LEFT, "a", cal.oDomContainer);
			if (navs && navs[0]) {
				try {
					navs[0].focus();
				} catch (e) {
					// ignore
				}
			}
		}, 0);
	},

	/**
	 * The default event handler for clicks on the "Next Month" navigation UI
	 *
	 * @method doNextMonthNav
	 * @param {DOMEvent} e	The DOM event
	 * @param {Calendar} cal	A reference to the calendar
	 */
	doNextMonthNav : function(e, cal) {
		Event.preventDefault(e);
		setTimeout(function() {
			cal.nextMonth();
			var navs = Dom.getElementsByClassName(cal.Style.CSS_NAV_RIGHT, "a", cal.oDomContainer);
			if (navs && navs[0]) {
				try {
					navs[0].focus();
				} catch (e) {
					// ignore
				}
			}
		}, 0);
	},

	/**
	* The default event handler for date cell selection. Currently attached to 
	* the Calendar's bounding box, referenced by it's <a href="#property_oDomContainer">oDomContainer</a> property.
	*
	* @method doSelectCell
	* @param {DOMEvent} e	The DOM event
	* @param {Calendar} cal	A reference to the calendar
	*/
	doSelectCell : function(e, cal) {
		var cell, d, date, index;

		var target = Event.getTarget(e),
			tagName = target.tagName.toLowerCase(),
			defSelector = false;

		while (tagName != "td" && !Dom.hasClass(target, cal.Style.CSS_CELL_SELECTABLE)) {

			if (!defSelector && tagName == "a" && Dom.hasClass(target, cal.Style.CSS_CELL_SELECTOR)) {
				defSelector = true;
			}

			target = target.parentNode;
			tagName = target.tagName.toLowerCase();

			if (target == this.oDomContainer || tagName == "html") {
				return;
			}
		}

		if (defSelector) {
			// Stop link href navigation for default renderer
			Event.preventDefault(e);
		}
	
		cell = target;

		if (Dom.hasClass(cell, cal.Style.CSS_CELL_SELECTABLE)) {
			index = cal.getIndexFromId(cell.id);
			if (index > -1) {
				d = cal.cellDates[index];
				if (d) {
					date = DateMath.getDate(d[0],d[1]-1,d[2]);
				
					var link;

					if (cal.Options.MULTI_SELECT) {
						link = cell.getElementsByTagName("a")[0];
						if (link) {
							link.blur();
						}

						var cellDate = cal.cellDates[index];
						var cellDateIndex = cal._indexOfSelectedFieldArray(cellDate);

						if (cellDateIndex > -1) {	
							cal.deselectCell(index);
						} else {
							cal.selectCell(index);
						}	

					} else {
						link = cell.getElementsByTagName("a")[0];
						if (link) {
							link.blur();
						}
						cal.selectCell(index);
					}
				}
			}
		}
	},

	/**
	* The event that is executed when the user hovers over a cell
	* @method doCellMouseOver
	* @param {DOMEvent} e	The event
	* @param {Calendar} cal	A reference to the calendar passed by the Event utility
	*/
	doCellMouseOver : function(e, cal) {
		var target;
		if (e) {
			target = Event.getTarget(e);
		} else {
			target = this;
		}

		while (target.tagName && target.tagName.toLowerCase() != "td") {
			target = target.parentNode;
			if (!target.tagName || target.tagName.toLowerCase() == "html") {
				return;
			}
		}

		if (Dom.hasClass(target, cal.Style.CSS_CELL_SELECTABLE)) {
			Dom.addClass(target, cal.Style.CSS_CELL_HOVER);
		}
	},

	/**
	* The event that is executed when the user moves the mouse out of a cell
	* @method doCellMouseOut
	* @param {DOMEvent} e	The event
	* @param {Calendar} cal	A reference to the calendar passed by the Event utility
	*/
	doCellMouseOut : function(e, cal) {
		var target;
		if (e) {
			target = Event.getTarget(e);
		} else {
			target = this;
		}

		while (target.tagName && target.tagName.toLowerCase() != "td") {
			target = target.parentNode;
			if (!target.tagName || target.tagName.toLowerCase() == "html") {
				return;
			}
		}

		if (Dom.hasClass(target, cal.Style.CSS_CELL_SELECTABLE)) {
			Dom.removeClass(target, cal.Style.CSS_CELL_HOVER);
		}
	},

	setupConfig : function() {
		var cfg = this.cfg;

		/**
		* The month/year representing the current visible Calendar date (mm/yyyy)
		* @config pagedate
		* @type String | Date
		* @default today's date
		*/
		cfg.addProperty(DEF_CFG.PAGEDATE.key, { value:new Date(), handler:this.configPageDate } );

		/**
		* The date or range of dates representing the current Calendar selection
		* @config selected
		* @type String
		* @default []
		*/
		cfg.addProperty(DEF_CFG.SELECTED.key, { value:[], handler:this.configSelected } );

		/**
		* The title to display above the Calendar's month header
		* @config title
		* @type String
		* @default ""
		*/
		cfg.addProperty(DEF_CFG.TITLE.key, { value:DEF_CFG.TITLE.value, handler:this.configTitle } );

		/**
		* Whether or not a close button should be displayed for this Calendar
		* @config close
		* @type Boolean
		* @default false
		*/
		cfg.addProperty(DEF_CFG.CLOSE.key, { value:DEF_CFG.CLOSE.value, handler:this.configClose } );

		/**
		* Whether or not an iframe shim should be placed under the Calendar to prevent select boxes from bleeding through in Internet Explorer 6 and below.
		* This property is enabled by default for IE6 and below. It is disabled by default for other browsers for performance reasons, but can be 
		* enabled if required.
		* 
		* @config iframe
		* @type Boolean
		* @default true for IE6 and below, false for all other browsers
		*/
		cfg.addProperty(DEF_CFG.IFRAME.key, { value:DEF_CFG.IFRAME.value, handler:this.configIframe, validator:cfg.checkBoolean } );

		/**
		* The minimum selectable date in the current Calendar (mm/dd/yyyy)
		* @config mindate
		* @type String | Date
		* @default null
		*/
		cfg.addProperty(DEF_CFG.MINDATE.key, { value:DEF_CFG.MINDATE.value, handler:this.configMinDate } );

		/**
		* The maximum selectable date in the current Calendar (mm/dd/yyyy)
		* @config maxdate
		* @type String | Date
		* @default null
		*/
		cfg.addProperty(DEF_CFG.MAXDATE.key, { value:DEF_CFG.MAXDATE.value, handler:this.configMaxDate } );
	
	
		// Options properties
	
		/**
		* True if the Calendar should allow multiple selections. False by default.
		* @config MULTI_SELECT
		* @type Boolean
		* @default false
		*/
		cfg.addProperty(DEF_CFG.MULTI_SELECT.key,	{ value:DEF_CFG.MULTI_SELECT.value, handler:this.configOptions, validator:cfg.checkBoolean } );

		/**
		* The weekday the week begins on. Default is 0 (Sunday = 0, Monday = 1 ... Saturday = 6).
		* @config START_WEEKDAY
		* @type number
		* @default 0
		*/
		cfg.addProperty(DEF_CFG.START_WEEKDAY.key,	{ value:DEF_CFG.START_WEEKDAY.value, handler:this.configOptions, validator:cfg.checkNumber  } );
	
		/**
		* True if the Calendar should show weekday labels. True by default.
		* @config SHOW_WEEKDAYS
		* @type Boolean
		* @default true
		*/
		cfg.addProperty(DEF_CFG.SHOW_WEEKDAYS.key,	{ value:DEF_CFG.SHOW_WEEKDAYS.value, handler:this.configOptions, validator:cfg.checkBoolean  } );
	
		/**
		* True if the Calendar should show week row headers. False by default.
		* @config SHOW_WEEK_HEADER
		* @type Boolean
		* @default false
		*/
		cfg.addProperty(DEF_CFG.SHOW_WEEK_HEADER.key, { value:DEF_CFG.SHOW_WEEK_HEADER.value, handler:this.configOptions, validator:cfg.checkBoolean } );
	
		/**
		* True if the Calendar should show week row footers. False by default.
		* @config SHOW_WEEK_FOOTER
		* @type Boolean
		* @default false
		*/	
		cfg.addProperty(DEF_CFG.SHOW_WEEK_FOOTER.key,{ value:DEF_CFG.SHOW_WEEK_FOOTER.value, handler:this.configOptions, validator:cfg.checkBoolean } );
	
		/**
		* True if the Calendar should suppress weeks that are not a part of the current month. False by default.
		* @config HIDE_BLANK_WEEKS
		* @type Boolean
		* @default false
		*/	
		cfg.addProperty(DEF_CFG.HIDE_BLANK_WEEKS.key, { value:DEF_CFG.HIDE_BLANK_WEEKS.value, handler:this.configOptions, validator:cfg.checkBoolean } );
		
		/**
		* The image that should be used for the left navigation arrow.
		* @config NAV_ARROW_LEFT
		* @type String
		* @deprecated	You can customize the image by overriding the default CSS class for the left arrow - "calnavleft"  
		* @default null
		*/	
		cfg.addProperty(DEF_CFG.NAV_ARROW_LEFT.key,	{ value:DEF_CFG.NAV_ARROW_LEFT.value, handler:this.configOptions } );
	
		/**
		* The image that should be used for the right navigation arrow.
		* @config NAV_ARROW_RIGHT
		* @type String
		* @deprecated	You can customize the image by overriding the default CSS class for the right arrow - "calnavright"
		* @default null
		*/	
		cfg.addProperty(DEF_CFG.NAV_ARROW_RIGHT.key, { value:DEF_CFG.NAV_ARROW_RIGHT.value, handler:this.configOptions } );
	
		// Locale properties
	
		/**
		* The short month labels for the current locale.
		* @config MONTHS_SHORT
		* @type String[]
		* @default ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
		*/
		cfg.addProperty(DEF_CFG.MONTHS_SHORT.key,	{ value:DEF_CFG.MONTHS_SHORT.value, handler:this.configLocale } );
		
		/**
		* The long month labels for the current locale.
		* @config MONTHS_LONG
		* @type String[]
		* @default ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
		*/	
		cfg.addProperty(DEF_CFG.MONTHS_LONG.key,		{ value:DEF_CFG.MONTHS_LONG.value, handler:this.configLocale } );

		/**
		* The 1-character weekday labels for the current locale.
		* @config WEEKDAYS_1CHAR
		* @type String[]
		* @default ["S", "M", "T", "W", "T", "F", "S"]
		*/	
		cfg.addProperty(DEF_CFG.WEEKDAYS_1CHAR.key,	{ value:DEF_CFG.WEEKDAYS_1CHAR.value, handler:this.configLocale } );
		
		/**
		* The short weekday labels for the current locale.
		* @config WEEKDAYS_SHORT
		* @type String[]
		* @default ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
		*/	
		cfg.addProperty(DEF_CFG.WEEKD