Calendar-Control--Row-Highlight-Example-Row-Highlight-Implementation

GUI Components JavaScript DHTML


            


  Yahoo! Calendar Control - Row Highlight Example
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    YAHOO.namespace("example.calendar");
    function init() {
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
      
      /* Override the doCellMouseOver function (used for IE) to add row highlighting) */
      YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
        var cell = this;
        var row = cell.parentNode;
        YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
        YAHOO.util.Dom.addClass(row, "hilite-row");
      }
      /* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
      YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
        var cell = this;
        var row = cell.parentNode;
        YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
        YAHOO.util.Dom.removeClass(row, "hilite-row");
      }
      YAHOO.example.calendar.cal1.render();
    }
  
  


  
  
  
    Calendar Control


  
    Row Highlight Implementation

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


  

  var cal1;
  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();
  }