80 lines
2.5 KiB
HTML
80 lines
2.5 KiB
HTML
<!DOCTYPE html PUBLIC
|
|
"-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Dynarch Calendar -- Single calendar for multiple fields</title>
|
|
<script src="../src/js/jscal2.js"></script>
|
|
<script src="../src/js/lang/en.js"></script>
|
|
<link rel="stylesheet" href="../src/css/jscal2.css" />
|
|
<link rel="stylesheet" href="../src/css/border-radius.css" />
|
|
<link rel="stylesheet" href="../src/css/steel/steel.css" />
|
|
</head>
|
|
<body>
|
|
<table>
|
|
<tr>
|
|
<td id="mon1"></td>
|
|
<td id="mon2"></td>
|
|
<td id="mon3"></td>
|
|
</tr>
|
|
</table>
|
|
<script>//<![CDATA[
|
|
// initial dates
|
|
var now = new Date();
|
|
var prev = new Date(); prev.setMonth(prev.getMonth() - 1);
|
|
var next = new Date(); next.setMonth(next.getMonth() + 1);
|
|
|
|
// create the calendars
|
|
var cal1 = Calendar.setup({ cont: "mon1", date: prev });
|
|
var cal2 = Calendar.setup({ cont: "mon2", date: now });
|
|
var cal3 = Calendar.setup({ cont: "mon3", date: next });
|
|
|
|
// this hack is necessary to prevent infinite recursion
|
|
var updating = false;
|
|
|
|
// next, assign some onChange handlers to each calendar; when
|
|
// the month/year is changed, update the other calendars
|
|
// accordingly.
|
|
|
|
cal1.addEventListener("onChange", function(cal, date, anim) {
|
|
if (!updating) {
|
|
updating = true;
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() + 1);
|
|
cal2.moveTo(date, anim);
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() + 1);
|
|
cal3.moveTo(date, anim);
|
|
updating = false;
|
|
}
|
|
});
|
|
|
|
cal2.addEventListener("onChange", function(cal, date, anim) {
|
|
if (!updating) {
|
|
updating = true;
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() - 1);
|
|
cal1.moveTo(date, anim);
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() + 2);
|
|
cal3.moveTo(date, anim);
|
|
updating = false;
|
|
}
|
|
});
|
|
|
|
cal3.addEventListener("onChange", function(cal, date, anim) {
|
|
if (!updating) {
|
|
updating = true;
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() - 2);
|
|
cal1.moveTo(date, anim);
|
|
date = new Date(date);
|
|
date.setMonth(date.getMonth() + 1);
|
|
cal2.moveTo(date, anim);
|
|
updating = false;
|
|
}
|
|
});
|
|
//]]></script>
|
|
</body>
|
|
</html>
|