Calendar Control - Row Highlight Example (Row Highlight Implementation) : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

 

Calendar Control - Row Highlight Example (Row Highlight Implementation)




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <title>Yahoo! Calendar Control - Row Highlight Example</title>
  

  <link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
  
  <script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
  <script type="text/javascript" src="./build/event/event.js" ></script>
  <script type="text/javascript" src="./build/dom/dom.js" ></script>

  <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
  <link type="text/css" rel="stylesheet" href="./build/reset/reset.css">

  <link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />

  <script type="text/javascript" src="./build/calendar/calendar.js"></script>
  <link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">
  
  <style> 
    /* highlight the whole row */
    .yui-calendar tr.hilite-row td.calcell {
      background-color:yellow;
    }

    /* 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>

  <script language="javascript">
    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();
    }
  </script>

  

</head>

<body onload="init()">
  <img id="logo" src="../img/logo.gif"/>
  
  <div id="pageTitle">
    <h3>Calendar Control</h3>
  </div>

  <div class="column left">
    <h4>Row Highlight Implementation</h4>

    <p>This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
  <style> 
    /* highlight the whole row */
    .yui-calendar tr.hilite-row td.calcell {
      background-color:yellow;
    }

    /* 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>

<script language="javascript">
  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();
  }
</script>
</textarea>
    </div>
    

    <div class="column right">
      <div style="margin-left:auto;margin-right:auto;width:150px">
      <div id="cal1Container"></div>
      <div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
        <a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
        <a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
      </div>
    </div>
  </div>

<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

</body>
</html>
           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Calendar