Calendar-employs-a-feature-called-the-Render-Stack-to-allow-you-to-customize-the-way-that-certain-date-cells-are-rendered-on-t

YUI Library JavaScript DHTML


            



    
Using the Render Stack

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}







  .yui-skin-sam .yui-calendar td.sunday { background-color:#999; }




Using the Render Stack


  Calendar employs a feature called the Render Stack to allow you to customize the way that certain date cells are rendered on the Calendar. The Render Stack consists of a collection of functions that can be executed when rendering certain dates. When the Calendar is rendered, each function in the Render Stack is executed for each applicable date. This functionality allows developers implementing the Calendar to alter the contents of date cells based on a set of rules.

This example shows you how to use any one of the built-in renderers provided with the Calendar, or write your own.

  YAHOO.namespace("example.calendar");
  YAHOO.example.calendar.init = function() {
    YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container",
                                   { pagedate:"2/2008" } );
    YAHOO.example.calendar.cal1.addRenderer("2/29", YAHOO.example.calendar.cal1.renderBodyCellRestricted);
    YAHOO.example.calendar.cal1.addRenderer("2/1/2008-2/7/2008", YAHOO.example.calendar.cal1.renderCellStyleHighlight1);
    var myCustomRenderer = function(workingDate, cell) {
      cell.innerHTML = "X";
      YAHOO.util.Dom.addClass(cell, "sunday");
      return YAHOO.widget.Calendar.STOP_RENDER;
    }
    YAHOO.example.calendar.cal1.addWeekdayRenderer(1, myCustomRenderer);
    YAHOO.example.calendar.cal1.render();
  }
  YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);