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>
yui.zip( 3,714 k)Related examples in the same category