Hi all,
I am trying to dynamically create a calendar when I click on a button and the calendar should dissapear when I click out of it. So far I have the following code but it is not working the way I want it to.
<html>
<head>
<style type="text/css">@import url(calendar-win2k-1.css);</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
<script type="text/javascript">
function onSelect(calendar, date) {
var input_field = document.getElementById("date");
input_field.value = date;
if (calendar.dateClicked) {
calendar.callCloseHandler(); // this calls "onClose"
}
}
function onClose(calendar) {
calendar.hide();
// or calendar.destroy();
}
</script>
</head>
<body>
<form name = MainForm>
<div id="d">
Date:<input type="text" name="date">
<input type="button" name="calButton" onclick="run()" value="...">
<div id="calendar-container"></div>
<script type="text/javascript">
function run() {
Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged // our callback function
}
)
function dateChanged(calendar) {
// Beware that this function is called even if the end-user only
// changed the month/year. In order to determine if a date was
// clicked you can use the dateClicked property of the calendar:
if (calendar.dateClicked) {
// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth(); // integer, 0..11
var d = calendar.date.getDate(); // integer, 1..31
// redirect...
window.location = "/" + y + "/" + m + "/" + d + "/index.php";
}
}
}
</script>
</div>
</body>
</html>
I am using the scripts from a JSCalendar which can be downloaded from
Thanks in advance!
MW
I am trying to dynamically create a calendar when I click on a button and the calendar should dissapear when I click out of it. So far I have the following code but it is not working the way I want it to.
<html>
<head>
<style type="text/css">@import url(calendar-win2k-1.css);</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
<script type="text/javascript">
function onSelect(calendar, date) {
var input_field = document.getElementById("date");
input_field.value = date;
if (calendar.dateClicked) {
calendar.callCloseHandler(); // this calls "onClose"
}
}
function onClose(calendar) {
calendar.hide();
// or calendar.destroy();
}
</script>
</head>
<body>
<form name = MainForm>
<div id="d">
Date:<input type="text" name="date">
<input type="button" name="calButton" onclick="run()" value="...">
<div id="calendar-container"></div>
<script type="text/javascript">
function run() {
Calendar.setup(
{
flat : "calendar-container", // ID of the parent element
flatCallback : dateChanged // our callback function
}
)
function dateChanged(calendar) {
// Beware that this function is called even if the end-user only
// changed the month/year. In order to determine if a date was
// clicked you can use the dateClicked property of the calendar:
if (calendar.dateClicked) {
// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth(); // integer, 0..11
var d = calendar.date.getDate(); // integer, 1..31
// redirect...
window.location = "/" + y + "/" + m + "/" + d + "/index.php";
}
}
}
</script>
</div>
</body>
</html>
I am using the scripts from a JSCalendar which can be downloaded from
Thanks in advance!
MW
![[dragon]](/data/assets/smilies/dragon.gif "[dragon] [dragon]")
