Setting up the Calendar

In this tutorial, we will create a Calendar that makes use of the built-in renderers, and we will also create one of our own.

The built-in renderers available are:

• renderCellDefault - Places a clickable link in the date cell
• renderBodyCellRestricted - Renders a text=only cell with the "restricted" style
• renderOutOfBoundsDate - Renders an out-of-bounds date (beyond the specified min/max dates)
• renderCellNotThisMonth - Renders a cell that is displayed in the current page, but precedes or follows the current month
• renderCellStyleToday - Renders the cell representing today's date
• renderCellStyleSelected - Renders a selected cell
• renderCellStyleHighlight1 - Adds the "highlight1" class to the date cell
• renderCellStyleHighlight2 - Adds the "highlight2" class to the date cell
• renderCellStyleHighlight3 - Adds the "highlight3" class to the date cell
• renderCellStyleHighlight4 - Adds the "highlight4" class to the date cell

To begin, we will instantiate a new Calendar and apply the restricted renderer to 2/29 of any year, and the "highlight1" style to the range of dates between 2/1/2008 and 2/7/2008.

Next, we will create a custom renderer that will place an "X" in the cell for every Sunday, and style it in a dark gray color. In order to specify that our renderer should override the default renderer (renderCellDefault), the custom function must return YAHOO.widget.Calendar.STOP_RENDER. This tells the Calendar to ignore the rest of the Render Stack and continue rendering the rest of the Calendar.