[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
05122024
/
htdocs
/
simpeg
/
zapatec
/
zpcal
/
zpcal
/
demo
/
[
Home
]
File: example5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" Click on a date This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button. When you click a date, the calendar calls a Javascript function which, in this case, displays the date above the calendar. Certain days, which have been specified as special days, are displayed differently. In this demonstration, the following were specified as special dates: January 1 May 1 May 5 July 4 July 14 November 29 December 25 "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Calendar Widget - Flat Calendar, Different Look for Special Days</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <!-- import the calendar script --> <script type="text/javascript" src="../src/calendar.js"></script> <!-- import the language module --> <script type="text/javascript" src="../lang/calendar-en.js"></script> <!-- other languages might be available in the lang directory; please check your distribution archive. --> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/green.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Flat Calendar, Different Look for Special Days</div> <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>green theme</b>.</li> <div style="float: right; margin-left: 1em; margin-bottom: 1em;" id="calendar-container"> <div style='text-align:center; font-weight:bold' id="preview"> Click on a date</div> <br/> </div> <li> This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button. </li> <li> When you click a date, the calendar calls a Javascript function which, in this case, displays the date above the calendar. <li> Certain days, which have been specified as <strong> special </strong> days, are displayed differently. In this demonstration, the following were specified as special dates: <br/> <br/> <ul> <li> January 1 </li> <li> May 1 </li> <li> May 5 </li> <li> July 4 </li> <li> July 14 </li> <li> November 29 </li> <li> December 25 </li> </ul> </li> </ul> </div> <script type="text/javascript"> <!-- to hide script contents from old browsers //months are 0 based which is a little confusing var SPECIAL_DAYS = [ [0, 1], //january first [4, 1], //May 1 [4, 5], //May 5 [6, 4], //July 4 [6, 14], //July 14 [10, 29], //November 29 [11, 25] //December 25 ]; function dateIsSpecial(year, month, day) { for (ii = 0; ii < SPECIAL_DAYS.length; ii++) { if (((SPECIAL_DAYS[ii] [0]) == month) && (((SPECIAL_DAYS[ii] [1]) == day))) { return true; } } return false; }; function dateChanged(calendar) { var preview = document.getElementById("preview"); if (preview) { preview.innerHTML = calendar.currentDate.print('%a, %b %d, %Y'); } }; // end hiding contents from old browsers --> </script> <script type="text/javascript"> var cal = new Zapatec.Calendar.setup({ flat : "calendar-container", // ID of the parent element flatCallback : dateChanged, // our callback function dateStatusFunc : function(date, y, m, d) { if (dateIsSpecial(y, m, d)) return "zpCalSpecialDay"; else return false; // other dates are enabled // return true if you want to disable other dates } }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>