Calendar Control - Custom Renderer Example (Holiday Renderer Implementation) : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

 

Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)



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

  <title>Yahoo! Calendar Control - Custom Renderer 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>
    .yui-calendar td.holiday {
      background-color:yellow;
      font-weight:bold;
    }
  </style>

  <script language="javascript">
    YAHOO.namespace("example.calendar");

    YAHOO.example.calendar.renderHoliday = function(workingDate, cell) {
      YAHOO.util.Dom.addClass(cell, "holiday");
    }

    function init() {
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container","1/2006");
      YAHOO.example.calendar.cal1.addRenderer("12/25,1/1", YAHOO.example.calendar.renderHoliday);
      YAHOO.example.calendar.cal1.render();
    }

    YAHOO.util.Event.addListener(window, "load", init);

  </script>
</head>

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

  <div class="column left">
    <h4>Holiday Renderer Implementation</h4>

    <p>Here is an example of how to create renderers to format specific holidays with a special style:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;

var renderHoliday = function(workingDate, cell) {
  YAHOO.util.Dom.addClass(cell, "holiday");
}

function init() {
  cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
  cal1.addRenderer("12/25,1/1", renderHoliday);
  cal1.render();
}
</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


Vérification Refresh
  
Enter code
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

Navioo GUI Components
» Calendar
Ajax Layer Ajax Layer
Data Type Data Type
Date Time Date Time
Development Development
Document Document
Event Event
Event onMethod Event onMethod
Form Control Form Control
GUI Components GUI Components
HTML HTML
Javascript CollectionsJavascript Collections
Javascript Objects Javascript Objects
Language Basics Language Basics
Node Operation Node Operation
Object Oriented Object Oriented
Page Components Page Components
Security Security
Style Layout Style Layout
Table Table
Utilities Utilities
Window Browser Window Browser