Yahoo! Calendar Control - Row Highlight Example

Row Highlight Implementation

This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:

/* highlight the current cell in the standard highlight color */
		.yui-calendar tr.hilite-row td.calcellhover {
			cursor:pointer;
			color:#FFF;
			background-color:#FF9900;
			border:1px solid #FF9900;
		}

/* make sure out of month cells don't highlight too */
		.yui-calendar tr.hilite-row td.calcell.oom {
			cursor:default;
			color:#999;
			background-color:#EEE;
			border:1px solid #E0E0E0;
		}
	</style>

function init() {
		cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
		
		/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
		cal1.doCellMouseOver = function(e, cal) {
			var cell = this;
			var row = cell.parentNode;

YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);
			YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");
		}

/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
		cal1.doCellMouseOut = function(e, cal) {
			var cell = this;
			var row = cell.parentNode;

YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);
			YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");
		}

cal1.render();
	}
</script>