Re:
I use the code below on my website.
It support multiple date selection fields. Whenever you want to have a date-selection field, you use the line below to add one, changing 'Fieldname' with any name you like/require.
<script type="text/javascript">addCal('Fieldname');</script>
In order for the above code to work, you have to add the javascript functions below into your <head> section:
<script>
var ffield;
function addCal(field)
{
document.write('<a href="calendar.php" target="_blank" style="margin:2px;" onClick="return showCal(' + field + ');"><img height="16" width="16" src="i/calendar.gif" border="0"></a>');
}
function showCal(field)
{
ffield = field;
window.open('calendar.php', 'popcalendar','height=200,width=200,scrollbars=no,resizable=no,menubar=no,toolbar=no,location=no');
return false;
}
function calendarPopupClick(value)
{
status = value;
if(ffield) ffield.value = value;
}
</script>
The addCal method ads a text-input field with a clickable image right next to it. When the image is clicked, the name of the textfield is stored in a javascript variable, just before a popup window is opened showing the php-calendar.
The calendar registers every dateselection and passes it to its window.opener window by calling window.opener.calendarPopupClick("click date value");
Because the name of the appropriate fieldname was stored into the javascript variable, javascript is able to set the textfields value with the value passed by the popup.
The Calendar.php code I use is shown below:
(some th-elements contain dutch abbreviations for the weekdays, I suppose you will manage to change that by yourself quite easily)
calendar.php
<?
//Check for date selectie from query string
if (isset($_GET['monthno'])) $monthno = $_GET['monthno'];
if (isset($_GET['year'])) $year = $_GET['year'];
if (!isset($monthno)) {
$monthno=date('n');
}
if (!isset($year)) {
$year = date('Y');
}
//check the current date
$now = mktime(0, 0, 0, $monthno, 1, $year);
$monthfulltext = date('F', $now);
$monthshorttext = date('M', $now);
//number of days
$day_in_mth = date('t', $now) ;
$day_text = date('D', $now);
//Find the selected year and date
$monthno = date('m', $now);
$year = date('Y', $now);
?>
<html>
<head>
<style type="text/css">
.tdday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #8BBDDE;
font-weight: normal;
font-size: 9px;
width: 26px;
line-height: 20px;
color: #fff;
vertical-align: middle;
text-align: center;
}
.tdtoday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
border:solid 1px #87BBDD;
}
.tdheading { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #DEECF7;
font-weight: bold;
font-size: 10px;
line-height: 18px;
color: #000;
vertical-align: middle;
text-align: center;
background-image:url('../i/secth.png');
padding:0px;
}
.tddate { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E7F2F9;
font-weight: normal;
font-size: 10px;
line-height: 16px;
width: 26px;
color: #000000;
vertical-align: middle;
text-align: center;
}
.caltable { border: #a0a0a0;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px
}
#mnoprev, #mnonext {font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#999;}
#mnoprev {position:absolute;left:5px;bottom:5px;}
#mnonext {position:absolute;right:5px;bottom:5px;}
</style>
<title>Calendar</title>
</head>
<body>
<table class="caltable" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="1" width=97%>
<tr><td colspan="7" class="tdheading"><? echo $monthfulltext." ".$year ?></td></tr>
<tr>
<td class="tdday">Zon</td><td class="tdday">Maa</td><td class="tdday">Din</td><td class="tdday">Woe</td><td class="tdday">Don</td><td class="tdday">Vri</td><td class="tdday">Zat</td>
</tr>
<tr>
<?
//When the first day in the month is not the first day of the week, add some empty cells
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, 1, $year));
if ($day_of_wk <> 0){
for ($i=0; $i<$day_of_wk; $i++)
{ echo '<td class="tddate"> </td>'; }
}
//Show all days within the month
for ($date_of_mth = 1; $date_of_mth <= $day_in_mth; $date_of_mth++) {
if ($day_of_wk = 0){
for ($i=0; $i<$day_of_wk; $i++);
{ echo "<tr>"; }
}
$day_text = date(D, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$date_no = date(j, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$day_of_wk = date(w, mktime(0, 0, 0, $monthno, $date_of_mth, $year));
$neatdate = sprintf('%04d-%02d-%02d', intval($year), intval($monthno), intval($date_of_mth));
if ( $date_no == date(j) && $monthno == date(n) )
{ echo "<td class=tdtoday>".linkify($date_no, $neatdate)."</td>"; }
else{
echo "<td class=tddate>".linkify($date_no, $neatdate)."</td>"; }
If ( $day_of_wk == 6 ) { echo "</tr>"; }
//If last day of the month is not last day of the week, add empty cells.
If ( $day_of_wk < 6 && $date_of_mth == $day_in_mth ) {
for ( $i = $day_of_wk ; $i < 6; $i++ ) {
echo "<td class=tddate> </td>"; }
echo "</tr>";
}
}
?>
</table>
<?php
//display links to next and previous month;
echo '<a id="mnoprev" href="?monthno='.($monthno-1).'&year='.$year.'"><<</a>';
echo '<a id="mnonext" href="?monthno='.($monthno+1).'&year='.$year.'">>></a>';
/*
function linkify generates a clickable day-of-month hyperlink, in order to pass
any clicks to the parent window.
*/
function linkify($text, $date)
{
return '<a style="cursor:pointer;" onClick="window.opener.calendarPopupClick(\''.$date.'\');">'.$text.'</a>';
}
?>
</body>
</html>
I hope this is somewhat helpfull in any way, as this is my first comment to Experts-Exchange and I might have not seen all the policies available, needed to be read before posting.
Comment from Roonaan
Date: 08/26/2004 10:36AM PDT
Comment
As I am unable to edit the above, I would like to add a 'working' example of the above calendar.php:
http://www.trickline.nl/events/tls/calendar.php
As the fields using this calendar are hidden within the administrators panel of my website I cannot show you a working example.
<?php echo "sterkte, haha"; ?>
