Первая копия
This commit is contained in:
79
metadata/include/jscalendar/demo/3-months.html
Normal file
79
metadata/include/jscalendar/demo/3-months.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!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" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" 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>
|
||||
50
metadata/include/jscalendar/demo/dateInfo.html
Normal file
50
metadata/include/jscalendar/demo/dateInfo.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!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 -- Special date information</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/matrix/matrix.css" />
|
||||
<style type="text/css">
|
||||
.highlight { color: #f00 !important; }
|
||||
.highlight2 { color: #0f0 !important; font-weight: bold; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td><div id="cont"></div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
|
||||
var DATE_INFO = {
|
||||
20090507: { klass: "highlight", tooltip: "%Y/%m/%d (%A)<br />That was yesterday" },
|
||||
20090508: { klass: "highlight", tooltip: "And this is TODAY" }
|
||||
};
|
||||
|
||||
function getDateInfo(date, wantsClassName) {
|
||||
var as_number = Calendar.dateToInt(date);
|
||||
if (as_number >= 20090518 && as_number <= 20090524)
|
||||
return {
|
||||
klass : "highlight2",
|
||||
tooltip : "<div style='text-align: center'>This is the green week</div>"
|
||||
};
|
||||
return DATE_INFO[as_number];
|
||||
};
|
||||
|
||||
var cal = Calendar.setup({
|
||||
cont : "cont",
|
||||
fdow : 1,
|
||||
date : 20090501,
|
||||
dateInfo : getDateInfo
|
||||
});
|
||||
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
42
metadata/include/jscalendar/demo/disabled.html
Normal file
42
metadata/include/jscalendar/demo/disabled.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!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 -- Disabled dates</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 20em">
|
||||
<div id="cont"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
Calendar.setup({
|
||||
cont : "cont",
|
||||
fdow : 1,
|
||||
selectionType : Calendar.SEL_MULTIPLE,
|
||||
disabled : function(date) {
|
||||
// disable all dates between 5 and 15 every month
|
||||
return (date.getDate() >= 5 &&
|
||||
date.getDate() <= 15);
|
||||
},
|
||||
|
||||
// checkRange: true, // if you simply want to disallow selection but not display anything
|
||||
|
||||
checkRange : function(date, cal) {
|
||||
// if you pass a function, it gets called and receives the first date that
|
||||
// disallowed the selection, and the calendar object.
|
||||
alert("Date " + date + " cannot be selected");
|
||||
}
|
||||
});
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
37
metadata/include/jscalendar/demo/multipleFields.html
Normal file
37
metadata/include/jscalendar/demo/multipleFields.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!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" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
To save memory, you can use a single (popup) calendar object to manage
|
||||
multiple input fields. The following sample shows you how to do it.
|
||||
</p>
|
||||
|
||||
<input size="30" id="f_date1" /><button id="f_btn1">...</button><br />
|
||||
<input size="30" id="f_date2" /><button id="f_btn2">...</button><br />
|
||||
<input size="30" id="f_date3" /><button id="f_btn3">...</button><br />
|
||||
<input size="30" id="f_date4" /><button id="f_btn4">...</button>
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
|
||||
var cal = Calendar.setup({
|
||||
onSelect: function(cal) { cal.hide() },
|
||||
showTime: true
|
||||
});
|
||||
cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d %I:%M %p");
|
||||
cal.manageFields("f_btn2", "f_date2", "%b %e, %Y %I:%M %p");
|
||||
cal.manageFields("f_btn3", "f_date3", "%e %B %Y %I:%M %p");
|
||||
cal.manageFields("f_btn4", "f_date4", "%A, %e %B, %Y %I:%M %p");
|
||||
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
43
metadata/include/jscalendar/demo/nextprev.html
Normal file
43
metadata/include/jscalendar/demo/nextprev.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!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 -- external next/prev date buttons</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr><td id="container"></td></tr>
|
||||
<tr style="test-align: center"><td>
|
||||
<button onclick="move_relative(+1)">Next</button>
|
||||
<button onclick="move_relative(-1)">Prev</button>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<script>//<![CDATA[
|
||||
|
||||
var now = new Date();
|
||||
|
||||
var cal = Calendar.setup({
|
||||
min : 20100401,
|
||||
max : 20100430,
|
||||
cont : "container",
|
||||
selection : [ Calendar.dateToInt(now) ]
|
||||
});
|
||||
|
||||
function move_relative(delta) {
|
||||
var date = Calendar.intToDate(cal.selection.get());
|
||||
date.setDate(date.getDate() + delta);
|
||||
if (!cal.isDisabled(date)) {
|
||||
cal.selection.reset([ Calendar.dateToInt(date) ]);
|
||||
}
|
||||
};
|
||||
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
63
metadata/include/jscalendar/demo/populateFields.html
Normal file
63
metadata/include/jscalendar/demo/populateFields.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!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 -- Populate fields</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The following sample shows you how you can populate some input fields
|
||||
based on the selection in the calendar. The fields are visible here,
|
||||
but you can add type="hidden" to make them hidden — they will still be
|
||||
submitted along with the form.
|
||||
</p>
|
||||
<form>
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="4" id="cont"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input style="text-align: center" readonly="true" name="date" id="f_date" size="14" />
|
||||
</td>
|
||||
<td>
|
||||
<input style="text-align: center" readonly="true" name="hour" id="f_hour" size="2" />
|
||||
</td>
|
||||
<td>:</td>
|
||||
<td>
|
||||
<input style="text-align: center" readonly="true" name="minute" id="f_minute" size="2" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
|
||||
// this handler is designed to work both for onSelect and onTimeChange
|
||||
// events. It updates the input fields according to what's selected in
|
||||
// the calendar.
|
||||
function updateFields(cal) {
|
||||
var date = cal.selection.get();
|
||||
if (date) {
|
||||
date = Calendar.intToDate(date);
|
||||
document.getElementById("f_date").value = Calendar.printDate(date, "%Y-%m-%d");
|
||||
}
|
||||
document.getElementById("f_hour").value = cal.getHours();
|
||||
document.getElementById("f_minute").value = cal.getMinutes();
|
||||
};
|
||||
|
||||
Calendar.setup({
|
||||
cont : "cont",
|
||||
showTime : 12,
|
||||
onSelect : updateFields,
|
||||
onTimeChange : updateFields
|
||||
});
|
||||
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
76
metadata/include/jscalendar/demo/rangeSelection.html
Normal file
76
metadata/include/jscalendar/demo/rangeSelection.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!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 -- Range selection without SHIFT</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td style="width: 20em">
|
||||
<div id="cont"></div>
|
||||
<div id="info" style="text-align: center; margin-top: 1em;">Click to select start date</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
|
||||
var SELECTED_RANGE = null;
|
||||
function getSelectionHandler() {
|
||||
var startDate = null;
|
||||
var ignoreEvent = false;
|
||||
return function(cal) {
|
||||
var selectionObject = cal.selection;
|
||||
|
||||
// avoid recursion, since selectRange triggers onSelect
|
||||
if (ignoreEvent)
|
||||
return;
|
||||
|
||||
var selectedDate = selectionObject.get();
|
||||
if (startDate == null) {
|
||||
startDate = selectedDate;
|
||||
SELECTED_RANGE = null;
|
||||
document.getElementById("info").innerHTML = "Click to select end date";
|
||||
|
||||
// comment out the following two lines and the ones marked (*) in the else branch
|
||||
// if you wish to allow selection of an older date (will still select range)
|
||||
cal.args.min = Calendar.intToDate(selectedDate);
|
||||
cal.refresh();
|
||||
} else {
|
||||
ignoreEvent = true;
|
||||
selectionObject.selectRange(startDate, selectedDate);
|
||||
ignoreEvent = false;
|
||||
SELECTED_RANGE = selectionObject.sel[0];
|
||||
|
||||
// alert(SELECTED_RANGE.toSource());
|
||||
//
|
||||
// here SELECTED_RANGE contains two integer numbers: start date and end date.
|
||||
// you can get JS Date objects from them using Calendar.intToDate(number)
|
||||
|
||||
startDate = null;
|
||||
document.getElementById("info").innerHTML = selectionObject.print("%Y-%m-%d") +
|
||||
"<br />Click again to select new start date";
|
||||
|
||||
// (*)
|
||||
cal.args.min = null;
|
||||
cal.refresh();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Calendar.setup({
|
||||
cont : "cont",
|
||||
fdow : 1,
|
||||
selectionType : Calendar.SEL_SINGLE,
|
||||
onSelect : getSelectionHandler()
|
||||
});
|
||||
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
26
metadata/include/jscalendar/demo/simple.html
Normal file
26
metadata/include/jscalendar/demo/simple.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!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 -- Simple popup calendar</title>
|
||||
<script src="../src/js/jscal2.js"></script>
|
||||
<script src="../src/js/lang/en.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/jscal2.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/border-radius.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../src/css/steel/steel.css" />
|
||||
</head>
|
||||
<body>
|
||||
<input size="30" id="f_date1" /><button id="f_btn1">...</button><br />
|
||||
|
||||
<script type="text/javascript">//<![CDATA[
|
||||
Calendar.setup({
|
||||
inputField : "f_date1",
|
||||
trigger : "f_btn1",
|
||||
onSelect : function() { this.hide() },
|
||||
showTime : 12,
|
||||
dateFormat : "%Y-%m-%d %I:%M %p"
|
||||
});
|
||||
//]]></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user