39 lines
1.4 KiB
HTML
39 lines
1.4 KiB
HTML
<!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="application/xhtml+xml; charset=utf-8" />
|
|
<title>Customized Calendar</title>
|
|
<style type="text/css">
|
|
form { margin: 50px 0 0 50px; }
|
|
.red-text { color: red; width: 200px; }
|
|
</style>
|
|
|
|
<!-- link calendar resources -->
|
|
<link rel="stylesheet" type="text/css" href="tcal.css" />
|
|
<script type="text/javascript" src="language.js"></script>
|
|
<script type="text/javascript" src="tcal.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<form action="#">
|
|
<!-- add class="tcal" to your input field -->
|
|
<div><input type="text" name="date1" class="tcal" value="Thirsday, September 22nd 2011" /></div>
|
|
<div><input type="text" name="date2" class="tcal red-text" value="" /></div>
|
|
<div><input type="text" name="no-date" value="Regular Text" /></div>
|
|
</form>
|
|
|
|
<h1>Customizations</h1>
|
|
<ul>
|
|
<li>Multiple calendars</li>
|
|
<li>Calendar preset to specific date</li>
|
|
<li>Calendar settings in separate file, can be generated dynamically on server or client side</li>
|
|
<li>Custom CSS class applied to input without conflict with calendar's code</li>
|
|
<li>Date format, week start and year scrolling is different from first demo</li>
|
|
<li>Customized CSS prefix</li>
|
|
<li>Customized styles: font size, background etc</li>
|
|
<li>Invisible dates in other months</li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|