Style-able and semantic XHTML I have tried to make Calendar as semantic as possible–with proper usage of CAPTION, THEAD, TBODY, TH and TD elements–and lots of CSS styling hooks. View the Calendar stylesheet for examples of the CSS; see the Styling Your Calendar section in the Manual for references to the XHTML. myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }}); myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1 }); ​​​​​​​myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1 }); 
代码：【复制】 【运行】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=gbk" />
	<title>Style-able and semantic XHTML › Calendar: a Javascript class for Mootools</title>
	<script type="text/javascript" src="http://tool.alixixi.com/demo/198/198/js/mootools.js"></script>
	<script type="text/javascript" src="http://tool.alixixi.com/demo/198/198/js/calendar.rc4.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
		window.addEvent('domready', function() { 
			myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: {x: 6, y: 0} });
			myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1, tweak: {x: 3, y: -3} });
			myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1, tweak: {x: 3, y: 0} });
		});
	//]]>
	</script>
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/iframe.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/calendar.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/dashboard.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="http://tool.alixixi.com/demo/198/198/css/i-heart-ny.css" media="screen" />
</head>
<body>
	<h1>Style-able and semantic XHTML</h1>

	

		I have tried to make Calendar as <strong>semantic</strong> as possible–with proper usage of <em>CAPTION, THEAD, TBODY, TH and TD</em> elements–and lots of <strong>CSS styling hooks</strong>. View the Calendar <a href="css/calendar.css" target="_blank">stylesheet</a> for examples of the <em>CSS</em>; see the <strong>Styling Your Calendar</strong> section in the Manual for references to the <em>XHTML</em>.

		<code>
			myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }});

			myCal2 = new Calendar({ date2: 'd/m/Y' }, { classes: ['dashboard'], direction: 1 });

			myCal3 = new Calendar({ date3: 'd/m/Y' }, { classes: ['i-heart-ny'], direction: 1 }); 
		</code>		
	

	<form action="/" class="long">
		<fieldset>
			<legend>Default styling</legend>

			<label for="date1">Date</label>
			<input id="date1" name="date1" type="text" />
		</fieldset>
	</form>

	<form action="/">
		<fieldset>
			<legend>Alternate styling: dashboard</legend>

			<label for="date2">Date</label>
			<input id="date2" name="date2" type="text" />
		</fieldset>
	</form>

	<form action="/">
		<fieldset>
			<legend>Alternate styling: i-heart-ny (experimental)</legend>

			<label for="date3">Date</label>
			<input id="date3" name="date3" type="text" />
		</fieldset>
	</form>
</body>
</html>