Popup, select a date, calendar in javascript in PHP page
Posted: Tue May 23, 2006 7:13 pm
A free javascript pop up calendar script. Similar to those used by the airlines, etc. works fine when the following code is on an .html page but won't work at all when I put it in a .php page
I don't know what to do but include the files that relate to the above code. I know it's a lot of code to go thru and I greatly appreciate any help you can offer.
The script that has the getCalendar() function is as follows:
The file calendar.html that is called above -
The other file that is used is called calendar_body.html and follows -
Code: Select all
<form name="foo">
<input type="text" name="bar" />
<a href="#" onclick="return getCalendar(document.foo.bar);">
<img src="calendar.png" border="0" />
</a>
</form>The script that has the getCalendar() function is as follows:
Code: Select all
<script language="javascript">
var calendarWindow = null;
var calendarColors = new Array();
calendarColors['bgColor'] = '#BDC5D0';
calendarColors['borderColor'] = '#333366';
calendarColors['headerBgColor'] = '#143464';
calendarColors['headerColor'] = '#FFFFFF';
calendarColors['dateBgColor'] = '#8493A8';
calendarColors['dateColor'] = '#004080';
calendarColors['dateHoverBgColor'] = '#FFFFFF';
calendarColors['dateHoverColor'] = '#8493A8';
var calendarMonths = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
var calendarWeekdays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S', 'S');
var calendarUseToday = true;
var calendarFormat = 'm/d/y';
var calendarStartMonday = false;
var calendarScreenX = 100; // either 'auto' or numeric
var calendarScreenY = 100; // either 'auto' or numeric
// }}}
// {{{ getCalendar()
[b] function getCalendar(in_dateField) [/b]
{
if (calendarWindow && !calendarWindow.closed) {
alert('Calendar window already open. Attempting focus...');
try {
calendarWindow.focus();
}
catch(e) {}
return false;
}
var cal_width = 415;
var cal_height = 310;
// IE needs less space to make this thing
if ((document.all) && (navigator.userAgent.indexOf("Konqueror") == -1)) {
cal_width = 410;
}
calendarTarget = in_dateField;
[b] calendarWindow = window.open('calendar.html', [/b] 'dateSelectorPopup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=0,dependent=no,width='+cal_width+',height='+cal_height + (calendarScreenX != 'auto' ? ',screenX=' + calendarScreenX : '') + (calendarScreenY != 'auto' ? ',screenY=' + calendarScreenY : ''));
return false;
}
// }}}
// {{{ killCalendar()
function killCalendar()
{
if (calendarWindow && !calendarWindow.closed) {
calendarWindow.close();
}
}
// }}}
</script>Code: Select all
html>
<head>
<title>Date Selector</title>
<script language="JavaScript">
// {{{ y2k()
function y2k(number)
{
return (number < 1000) ? number + 1900 : number;
}
// }}}
// {{{ _rgb2hex()
function _rgb2hex(red,green,blue)
{
var html_red = red.toString(16).toUpperCase();
var html_green = green.toString(16).toUpperCase();
var html_blue = blue.toString(16).toUpperCase();
if (html_red.length == 1) {
html_red = "0" + html_red
}
if (html_green.length == 1) {
html_green = "0" + html_green
}
if (html_blue.length == 1) {
html_blue = "0" + html_blue
}
return '#' + html_red + html_green + html_blue;
}
// }}}
// {{{ _hex2rgb()
function _hex2rgb(htmlcode)
{
var htmlcode = htmlcode.replace(/#/,'');
var rgb = new Array();
rgb["red"] = parseInt(htmlcode.substr(0,2),16);
rgb["green"] = parseInt(htmlcode.substr(2,2),16);
rgb["blue"] = parseInt(htmlcode.substr(4,2),16);
return rgb;
}
// }}}
// {{{ getDarkColor()
function getDarkColor(htmlcode)
{
var decimalcolor = _hex2rgb(htmlcode);
decimalcolor["red"] = Math.max(0,decimalcolor["red"]-40);
decimalcolor["green"] = Math.max(0,decimalcolor["green"]-40);
decimalcolor["blue"] = Math.max(0,decimalcolor["blue"]-40);
return _rgb2hex(decimalcolor["red"],decimalcolor["green"],decimalcolor["blue"]);
}
// }}}
if (typeof(window.opener.calendarStartMonday) == 'undefined') {
var calendarStartMonday = false;
}
else {
var calendarStartMonday = window.opener.calendarStartMonday ? true : false;
}
// get the date format
if (typeof(window.opener.calendarFormat) == 'undefined') {
var calendarFormat = 'y/m/d';
}
// we are doing on a leap of faith here that the user has 'm','d' and 'y' only in the format
else {
var calendarFormat = window.opener.calendarFormat;
}
// get the calendarColors variable and setup the colors
if (typeof(window.opener.calendarColors) == 'undefined') {
alert('Please configure the colors by setting the calendarColors array!');
window.close();
}
// grab the color settings
var calendarColors = window.opener.calendarColors;
// set defaults for the selected date to be a darker color
if (typeof(calendarColors['dateSelectedBgColor']) == 'undefined') {
calendarColors['dateSelectedBgColor'] = getDarkColor(calendarColors['dateBgColor']);
}
if (typeof(calendarColors['dateSelectedColor']) == 'undefined') {
calendarColors['dateSelectedColor'] = calendarColors['dateColor'];
}
if (typeof(window.opener.calendarMonths) == 'undefined' || window.opener.calendarMonths.length != 12) {
var calendarMonths = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
}
else {
var calendarMonths = window.opener.calendarMonths;
}
if (typeof(window.opener.calendarWeekdays) == 'undefined' || window.opener.calendarWeekdays.length != 8) {
// we have two sundays to accomodate for calendars starting on monday
var calendarWeekdays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S', 'S');
}
else {
var calendarWeekdays = window.opener.calendarWeekdays;
}
var calendarDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
//images
var right_still = "images/arrows_r_still.gif"
var right_anim = "images/arrows_r_anim.gif"
var left_still = "images/arrows_l_still.gif"
var left_anim = "images/arrows_l_anim.gif"
// get the reference to the target element and setup the date
var targetDateField = window.opener.calendarTarget;
var dateString = targetDateField.value;
if (dateString != '' &&
(typeof(window.opener.calendarUseToday) == 'undefined' || !window.opener.calendarUseToday)) {
// convert the user format of the date into something we use to make a javascript Date object
// we need to pad with placeholders to get the rigth offset
tmp_format = calendarFormat.replace(/m/i, 'mm').replace(/d/i, 'dd').replace(/y/i, 'yyyy');
tmp_yOffset = tmp_format.indexOf('y');
tmp_mOffset = tmp_format.indexOf('m');
tmp_dOffset = tmp_format.indexOf('d');
var today = new Date(dateString.substring(tmp_yOffset, tmp_yOffset + 4), dateString.substring(tmp_mOffset, tmp_mOffset +
2) - 1, dateString.substring(tmp_dOffset, tmp_dOffset + 2));
if ((today == "Invalid Date") || (isNaN(today))) {
var today = new Date();
}
}
// use today's date
else {
var today = new Date();
}
var day = today.getDate();
var year = y2k(today.getYear());
var month = today.getMonth();
var currentDay = day;
var currentYear = year;
var currentMonth = month;
</script>
</head>
<frameset frameborder="0" framespacing="0" ROWS="100%,*">
<frame scrolling="no" frameborder="0" marginheight="0" marginwidth="0" name="cal" noresize src="calendar_body.html">
</frameset>
</html>Code: Select all
<html>
<head>
<title>Calendar</title>
<style>
body {
background-color: #FFFFFF;
}
.calendar {
position: absolute;
left: 5px;
top: 5px;
width: 400px;
}
.dayofweek {
font-size: 13px;
}
.month {
font-size: 13px;
}
.date {
width: 10%;
height: 40px;
padding-right: 3px;
text-align: right;
vertical-align: bottom;
font-size: 13px;
font-weight: bold;
cursor: pointer;
cursor: hand;
}
.selected {
width: 10%;
height: 40px;
padding-right: 3px;
text-align: right;
vertical-align: bottom;
font-weight: bold;
font-size: 13px;
cursor: pointer;
cursor: hand;
}
.empty {
width: 10%;
height: 40px;
}
a {
font-weight: bold;
}
form {
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript" language="JavaScript"><!--
// {{{ calendar()
function calendar(month, year)
{
var realMonth = parseInt(month) + 1;
// we need to put in the zero placeholders
if (realMonth < 10) {
realMonth = '0' + realMonth;
}
var realDate = '';
var output = '';
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
weekdayOffset = 0;
if (parent.calendarStartMonday) {
if (startDay) {
startDay--;
}
else {
startDay = 6;
}
weekdayOffset++;
}
// Determined whether this is a leap year or not
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
parent.calendarDays[1] = 29;
}
else {
parent.calendarDays[1] = 28;
}
// we break up the output so it flushes the buffer frequently
output += '<form><table border="0" cellspacing="0" cellpadding="3" width="100%"><tr><td align="left"><img src="limage/arrows_l_still.gif" id="arrow_left_id" border="0" usemap="#arrow_left_map"></td><td align="center">';
output += '<select onchange="parent.month=this.options[this.selectedIndex].value; window.location='+"'calendar_body.html'"+';" title="Month Jump">';
for (month_cnt = 0; month_cnt < 12; month_cnt++) {
output += '<option value='+month_cnt;
if (month_cnt == thisMonth) {
output += ' selected';
}
output += '>' + parent.calendarMonths[month_cnt] + '</option>';
}
output += '</select> <select onchange="parent.year=this.options[this.selectedIndex].value; window.location='+"'calendar_body.html'"+';" title="Year Jump">';
for (year_cnt = 1; year_cnt <= 21; year_cnt++) {
output += '<option value="'+yeararray[year_cnt]+'"';
if (yeararray[year_cnt] == thisYear) {
output += ' selected';
}
output += '>'+yeararray[year_cnt]+'</option>';
}
output += '</select></td>';
output += '<td align="right"><img src="images/arrows_r_still.gif" name="arrow_right_id" id="arrow_right_id" border="0" usemap="#arrow_right_map"></td></tr>\n';
output += '<tr><td colspan="3" valign="top"><table border="0" cellspacing="1" cellpadding="0" width="100%">';
output += '<tr class="dayofweek" style="background-color: '+calendarColors['headerBgColor']+';">';
// print out the days of the week
for (i = weekdayOffset; i < 7 + weekdayOffset; i++) {
output += '<th style="color: '+calendarColors['headerColor']+';">' + parent.calendarWeekdays[i] + '</th>';
}
output += '\n<tr>';
var column = 0;
for (i = 0; i < startDay; i++) {
output += '<td class="empty" style="background-color: '+calendarColors['bgColor']+';"> </td>';
column++;
}
for (i = 1; i <= parent.calendarDays[month]; i++) {
realDate = i;
// add the zero place holder
if (realDate < 10) {
realDate = '0' + realDate
}
if ((i == parent.currentDay) && (month == parent.currentMonth) && (year == parent.currentYear)) {
output += '<td class="selected" style="background-color: '+calendarColors['dateSelectedBgColor']+'; color: '+calendarColors['dateSelectedColor']+';" height="40" onmouseover="colorize(this,1,\'dateSelected\');" onmouseout="colorize(this,0,\'dateSelected\');" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">';
if(document.layers) {
output += '<a href="javascript: void(0);" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">'+i+'</a> ';
}
else {
output += '<br />' + i;
}
output += '</td>';
}
else {
output += '<td class="date" style="background-color: '+calendarColors['dateBgColor']+'; color: '+calendarColors['dateColor']+';" height="40" onmouseover="colorize(this,1,\'date\');" onmouseout="colorize(this,0,\'date\');" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">';
if(document.layers) {
output += '<a href="javascript: void(0);" onclick="sendDate('+realMonth+', '+realDate+', '+year+');">'+i+'</a> ';
}
//put in some line breaks to fill up the cell
else {
output += '<br />'+i
}
output += '</td>';
}
column++;
// end the week
if (column == 7) {
output += '</tr>\n<tr>';
column = 0;
}
}
for(j = parent.calendarDays[month]; j < 42-startDay; j++) {
output += '<td class="empty" style="background-color: '+calendarColors['bgColor']+';" height="40"> </td>';
column++;
// end the week
if (column == 7) {
output += '</tr>\n<tr>';
column = 0;
}
}
output += '</tr></table></td></tr></table></form>';
return output;
}
// }}}
// {{{ printCalendar()
function printCalendar(whichMonth)
{
var output = '';
if (document.layers) {
var output = '<body link="' + calendarColors['dateColor'] + '" alink="' + calendarColors['dateSelectedColor']+ '"><layer bgcolor="'+calendarColors['bgColor']+'">';
}
else {
var output = '<body><style>select { font-weight: bold; font-size: 12px; }</style><div class="calendar" style="border: 2px solid ' + calendarColors['borderColor'] + '; background-color: '+calendarColors['bgColor']+';">';
}
output += calendar(whichMonth,thisYear);
if (!document.layers) {
output += '</div>';
}
else {
output += '</layer>';
}
output += '<map name="arrow_right_map"><area shape="RECT" coords="1,1,13,17" onmouseover="animate_right(\'arrow_right_id\',1)" onmouseout="animate_right(\'arrow_right_id\',0)" onclick="nextmonth();" href="calendar_body.html" title="Next Month" alt="Next Month"><area shape="RECT" coords="22,1,44,17" onmouseover="animate_right(\'arrow_right_id\',1)" onmouseout="animate_right(\'arrow_right_id\',0)" onclick="yearforward();" href="calendar_body.html" title="Next Year" alt="Next Year"></map><map name="arrow_left_map"><area shape="RECT" coords="1,1,23,17" onmouseover="animate_left(\'arrow_left_id\',1)" onmouseout="animate_left(\'arrow_left_id\',0)" onclick="yearback();" href="calendar_body.html" title="Previous Year" alt="Previous Year"><area shape="RECT" coords="32,1,45,17" onmouseover="animate_left(\'arrow_left_id\',1)" onmouseout="animate_left(\'arrow_left_id\',0)" onclick="previousmonth();" href="calendar_body.html" title="Previous Month" alt="Previous Month"></map>';
output += '</body>';
document.open();
document.write(output);
document.write();
}
// }}}
// {{{ animate_right()
function animate_right(imagename,imageswitch)
{
if(document.all) {
imagename = eval("document.all." + imagename)
}
else if(document.getElementById) {
imagename = document.getElementById(imagename)
}
if (!document.layers) {
if (imageswitch == 1) {
imagename.src = parent.right_anim;
}
else {
imagename.src = parent.right_still;
}
}
}
// }}}
// {{{ animate_left()
function animate_left(imagename,imageswitch)
{
if (document.all) {
imagename = eval("document.all." + imagename)
}
else if (document.getElementById) {
imagename = document.getElementById(imagename)
}
if (!document.layers) {
if (imageswitch == 1) {
imagename.src = parent.left_anim;
}
else {
imagename.src = parent.left_still;
}
}
}
// }}}
// {{{ colorize()
function colorize (which, toggle, type)
{
if ((document.all) || (document.getElementById)) {
if (toggle == 1) {
which.style.color = calendarColors['dateHoverColor'];
which.style.backgroundColor = calendarColors['dateHoverBgColor'];
}
else {
which.style.color = calendarColors[type + 'Color'];
which.style.backgroundColor = calendarColors[type + 'BgColor'];
}
}
}
// }}}
// {{{ yearback()
function yearback()
{
parent.year--;
}
// }}}
// {{{ yearforward()
function yearforward()
{
parent.year++;
}
// }}}
// {{{ previousmonth()
function previousmonth()
{
if (parent.month > 0) {
parent.month--;
}
else {
parent.month = 11;
parent.year--;
}
}
// }}}
// {{{ nextmonth()
function nextmonth()
{
if (parent.month < 11) {
parent.month++;
}
else {
parent.month = 0;
parent.year++;
}
}
// }}}
// {{{ sendDate()
function sendDate(month, day, year)
{
// pad with blank zeros numbers under 10
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
selectedDate = parent.calendarFormat;
selectedDate = selectedDate.replace(/m/, month);
selectedDate = selectedDate.replace(/d/, day);
selectedDate = selectedDate.replace(/y/, year);
targetDateField.value = selectedDate;
parent.window.close();
}
// }}}
// grab the color settings from the parent, who has done validition on the variable
var calendarColors = parent.calendarColors;
// get the reference to the target element from the parent, who has done validation on variable
var targetDateField = parent.targetDateField;
var thisDay = parent.day;
var thisMonth = parent.month;
var thisYear = parent.year;
var yeararray = new Array();
for (year_cnt = 1; year_cnt <= 21; year_cnt++) {
yeararray[year_cnt] = thisYear - 11 + year_cnt;
}
printCalendar(thisMonth);
//--></script>
</head>
<body alink="#000000">
</body>
</html>