PDA

Click to See Complete Forum and Search --> : For real Javascript Experts

codeDude
07-08-2003, 08:12 AM
Folks,

I would be gratefull for any expert advice as to what is going wrong with the below calendar.

The calender accepts 2 date parameters, giving the lower and upper range of dates for the user to select. These valid dates *should* be coloured blue, with all other dates grayed.

The above works perfectly well when JUST the calender program is running [comment out the bottom calender call function to test], but when parameters are passed from the below HTML, the calender functions, but an if statement doesn't seem to work which checks to see if the text should be coloured blue.

There maybe some fundamental issue with dates which I dont understand ???

Thanks.

*** Program to Call the Calender up [Click on image] ***

<html>
<head>
<script>
minDate= new Date(2002,2,2)
maxDate= new Date(2003,9,9)
</script>
</head>
<body>
<form name="form1">

<table width="30%">
<tr>
<td><a href="#" onClick="javascript:var cal=window.open('cal.html','','scrollbars=no');cal.calendar(minDate,maxDate)"><img src="calendar.gif"></a></td>
</tr>
</table>

</form>
</body>
</html>



*** Calendar Program [works fine if not called from above program] ***


<HTML>
<style>
body {font-family:Arial; align:middle}
table {background-color:FFEC33}
#head td {color:black; background-color:F7D400; width:32}
div {color:blue; font-weight:bold; cursor:hand}
</style>
<BODY onResize="window.resizeTo(274,225)" leftMargin=0 rightMargin=0 topMargin=0 bottomMargin=0>
<FORM name="calendarForm">

<table style="text-align:center; font-size:12" cellspacing=0 cellpadding=1 border=0>
<tr style="background-color:F7D700; color:blue; cursor:hand">
<td id=Jan onClick="selectMonth(0)">Jan</td><td id=Feb onClick="selectMonth(1)">Feb</td><td id=Mar onClick="selectMonth(2)">Mar</td>
<td id=Apr onClick="selectMonth(3)">Apr</td><td id=May onClick="selectMonth(4)">May</td><td id=Jun onClick="selectMonth(5)">Jun</td>
<td id=Jul onClick="selectMonth(6)">Jul</td><td id=Aug onClick="selectMonth(7)">Aug</td><td id=Sep onClick="selectMonth(8)">Sep</td>
<td id=Oct onClick="selectMonth(9)">Oct</td><td id=Nov onClick="selectMonth(10)">Nov</td><td id=Dec onClick="selectMonth(11)">Dec</td>
</tr>
<tr><td colspan=12>
<table style="color:blue; text-align:center; font-size:14">
<tr><td id=monthTxt colspan=12 height=34 style='color:blue'><B>xxx</B> <select name=calendarYear onChange="selectYear()"></select></td></tr>
<tr id=head><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td></tr>
<tr><td id=day1row1></td><td id=day2row1></td><td id=day3row1></td><td id=day4row1></td><td id=day5row1></td><td id=day6row1></td><td id=day7row1></td></tr>
<tr><td id=day1row2></td><td id=day2row2></td><td id=day3row2></td><td id=day4row2></td><td id=day5row2></td><td id=day6row2></td><td id=day7row2></td></tr>
<tr><td id=day1row3></td><td id=day2row3></td><td id=day3row3></td><td id=day4row3></td><td id=day5row3></td><td id=day6row3></td><td id=day7row3></td></tr>
<tr><td id=day1row4></td><td id=day2row4></td><td id=day3row4></td><td id=day4row4></td><td id=day5row4></td><td id=day6row4></td><td id=day7row4></td></tr>
<tr><td id=day1row5></td><td id=day2row5></td><td id=day3row5></td><td id=day4row5></td><td id=day5row5></td><td id=day6row5></td><td id=day7row5></td></tr>
<tr><td id=day1row6></td><td id=day2row6></td><td id=day3row6></td><td id=day4row6></td><td id=day5row6></td><td id=day6row6></td><td id=day7row6></td></tr>
</table>
</tr>
</table>
</form>

<script>
window.resizeTo(274,225)
window.moveTo(250,300)
monthsInYear = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") // Months to evaluate into objects


function calendar(minDt,maxDt) {
// Global
calendarMinDate= minDt
calendarMaxDate= maxDt
calendarSelectDate = new Date()

currentMonth=calendarSelectDate.getMonth()

// If current Month is December, then allow an extra year to be shown just in case any future dates may need to be selected
var addYear=1*(calendarMaxDate.getMonth() ==11)

for (var i=calendarMinDate.getFullYear(); i <= calendarMaxDate.getFullYear() + addYear; i++) {
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length] = new Option (i,i)
if (calendarMaxDate.getFullYear() == i)
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length -1].selected = true
}
updateCalendar()
}


function updateCalendar() {
// Get number of days in the month
var oneHour = 1000 * 60 * 60
var oneDay = oneHour * 24
var thisMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), 1) // Get 1st of Month
var nextMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth() + 1, 1) // Get 1st of Next Month
var daysInMonth = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour) / oneDay) // Take into account time zones

monthTxt.innerHTML = "<B>" + monthsInYear[calendarSelectDate.getMonth()] + monthTxt.innerHTML.substr(6) // Change Month Text
eval(monthsInYear[currentMonth]).style.backgroundColor="F7D700" // Reset Last Selected Month Background Color
currentMonth=calendarSelectDate.getMonth()
eval(monthsInYear[calendarSelectDate.getMonth()]).style.backgroundColor="lime" // Set selected month background color

// Clear All Cells Before Repopulating
for (var row=1; row < 7; row++)
for (var day=1; day < 8; day++)
eval("day"+day+"row"+row).innerText = " " // Get cell ID & Set Cells Outside Calendar Range To a Space

// Get 1st Of Month Position Start
day=thisMonth.getDay()
if (day==0)
day=7 // Sunday is day 0, but is 7 in this calender

var row=1
for (var dy=1; dy < daysInMonth + 1; dy++) {
var tmpDate= new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), dy) // Compare Date for Range
var cellName = eval("day"+day+"row"+row)
// Below changes text to blue and allows mouse Click- Fail Point when called from another program
if ((tmpDate >= calendarMinDate) && (tmpDate <= calendarMaxDate))
cellName.innerHTML = "<div onClick='putDate(this.innerText)'>" + dy + "</div>"
else
cellName.innerHTML = "<B><font color=gray>" + dy + "</font></B>"

if (day++ ==7) {
day=1 // Reset to Monday
row++
}
}
}

function selectMonth(selMonth) {
calendarSelectDate = new Date(calendarForm.calendarYear.value,selMonth,1)
updateCalendar()
}

function selectYear() {
calendarSelectDate = new Date(calendarForm.calendarYear.value,currentMonth,1)
updateCalendar()
}

function putDate(day) {
if (day.length == 1)
day="0"+day

var month=monthsInYear[calendarSelectDate.getMonth()].toUpperCase()
var dateString=day + month + calendarSelectDate.getFullYear()
alert(dateString)
}

// Uncommenting below enables program to work correctly!
//calendar(new Date(2002,03,20),new Date(2003,06,03)) // Execute calendar

</script>
freefall
07-08-2003, 08:24 AM
Really nice little program you've got here!
All you need to do is remove the "java script:" from the onclick. Events like onclick don't need "javascript:" like hrefs do.


<a href="#" onclick="
var cal=window.open('cal.html','','scrollbars=no');
cal.calendar(minDate,maxDate);">
<img src="calendar.gif">
</a>


- Ian
codeDude
07-08-2003, 08:45 AM
Freefall,

Thanks for your reply. You have made a valid point about my javascript: reference, however, this does not affect the problem i am still having.

Thanks

codeDude
codeDude
07-10-2003, 06:21 AM
Come on folks - I posted this a couple of days ago and it still hasn't been diagnosed. I've cut it down where appropriate to keep the length short.

I've written a calender program [see attachment] that works fine. The idea is to pass in 2 parameters to the calender which gives the lower and upper date ranges from which is a valid selection range. Within this range, the dates should be BLUE, and clickable [ a message is shown for now]. Other dates will all be gray.

This works in its own window, but when called from another window [paste code below], the dates get passed through correctly, the calender changes ok, BUT THE DATES DO NOT CHANGE TO BLUE!

Very Strange.

Pleeeeese heeeeeelp meeee!

<html>
<head>
<script>
minDate= new Date(2002,2,2)
maxDate= new Date(2003,9,9)
</script>
</head>
<body>
<form name="form1">

<table width="30%">
<tr>
<td><a href="javascript: var cal=window.open('cal.html','','scrollbars=no');cal.calendar(minDate,maxDate)"> <img src="calendar.gif"></a></td>
</tr>
</table>
</form>
</body>
</html>
Fang
07-10-2003, 09:15 AM
Take out the "var" in:
<a href="#" onclick="
var cal=window.open('cal.html','','scrollbars=no');
cal.calendar(minDate,maxDate);">
<img src="calendar.gif">
</a>
codeDude
07-10-2003, 09:21 AM
Fang,

I've tried as you suggest, but it does NOT make any difference!:(
freefall
07-10-2003, 09:26 AM
No, what he wants is for the script to highlight and link the dates inside the calendar script, like when he calls the calendar() fcn from inside cal.html. It's a problem with passing date objects between files, calendar() won't recognize the dates. I'm going to do some troubleshoot coding, see if I can figure this out!
- Ian
freefall
07-10-2003, 09:31 AM
!!!!! ALL RIGHT !!!!!!!!
I'm happy, I got it!


function calendar(minDt,maxDt) {
// Global
calendarMinDate= new Date()
calendarMinDate.setFullYear(minDt[0])
calendarMinDate.setMonth(minDt[1])
calendarMinDate.setDate(minDt[2])

calendarMaxDate= new Date()
calendarMaxDate.setFullYear(maxDt[0])
calendarMaxDate.setMonth(maxDt[1])
calendarMaxDate.setDate(maxDt[2])
calendarSelectDate = new Date()

currentMonth=calendarSelectDate.getMonth()


Just slip that into the cal.html!

Then in the calling file, replace the top script with:
<script>
minDate= new Array(2002,2,2)
maxDate= new Array(2003,9,9)
</script>


- Ian
codeDude
07-10-2003, 09:41 AM
Freefall,

Well, this is the strange thing!

Cal DOES recognise the dates, [put some alerts in], the date range does work, but the IF statement [look at comments i've made in the code] doesn't recognise dates at this point!!

Its really bizarre, you need to run the program (1) by itself to see what is supposed to happen, then (2) from the caller window.

Dont forget to comment out the function at the bottom of cal which calls calendar when you run it from the caller program.
freefall
07-10-2003, 10:02 AM
function calendar(minDt,maxDt) {
// Global
calendarMinDate= new Date()
calendarMinDate.setFullYear(minDt.getFullYear())
calendarMinDate.setMonth(minDt.getMonth())
calendarMinDate.setDate(minDt.getDate())

calendarMaxDate= new Date()
calendarMaxDate.setFullYear(maxDt.getFullYear())
calendarMaxDate.setMonth(maxDt.getMonth())
calendarMaxDate.setDate(maxDt.getDate())
calendarSelectDate = new Date()
Then you can leave the dates in the calling html as new Date() Works the same way, I see your reasoning, this is a calendar, after all, and it's not just going to display a static date like in the array

- Ian
codeDude
07-10-2003, 10:16 AM
Ian,

I really appreciate your help - maybe i haven't explained myself too well.

I think we MAY be going along the wrong track - if you see below, i've added some alert messages in to see what values are being passed - this works fine. Its later on - see comment around line 95, as this is where it fails..

- paul


<HTML>
<style>
body {font-family:Arial; align:middle}
table {background-color:FFEC33}
#head td {color:black; background-color:F7D400; width:32}
div {color:blue; font-weight:bold; cursor:hand}
</style>
<BODY onResize="window.resizeTo(274,225)" leftMargin=0 rightMargin=0 topMargin=0 bottomMargin=0>
<FORM name="calendarForm">

<table style="text-align:center; font-size:12" cellspacing=0 cellpadding=1 border=0>
<tr style="background-color:F7D700; color:blue; cursor:hand">
<td id=Jan onClick="selectMonth(0)">Jan</td><td id=Feb onClick="selectMonth(1)">Feb</td><td id=Mar onClick="selectMonth(2)">Mar</td>
<td id=Apr onClick="selectMonth(3)">Apr</td><td id=May onClick="selectMonth(4)">May</td><td id=Jun onClick="selectMonth(5)">Jun</td>
<td id=Jul onClick="selectMonth(6)">Jul</td><td id=Aug onClick="selectMonth(7)">Aug</td><td id=Sep onClick="selectMonth(8)">Sep</td>
<td id=Oct onClick="selectMonth(9)">Oct</td><td id=Nov onClick="selectMonth(10)">Nov</td><td id=Dec onClick="selectMonth(11)">Dec</td>
</tr>
<tr><td colspan=12>
<table style="color:blue; text-align:center; font-size:14">
<tr><td id=monthTxt colspan=12 height=34 style='color:blue'><B>xxx</B> <select name=calendarYear onChange="selectYear()"></select></td></tr>
<tr id=head><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td></tr>
<tr><td id=day1row1></td><td id=day2row1></td><td id=day3row1></td><td id=day4row1></td><td id=day5row1></td><td id=day6row1></td><td id=day7row1></td></tr>
<tr><td id=day1row2></td><td id=day2row2></td><td id=day3row2></td><td id=day4row2></td><td id=day5row2></td><td id=day6row2></td><td id=day7row2></td></tr>
<tr><td id=day1row3></td><td id=day2row3></td><td id=day3row3></td><td id=day4row3></td><td id=day5row3></td><td id=day6row3></td><td id=day7row3></td></tr>
<tr><td id=day1row4></td><td id=day2row4></td><td id=day3row4></td><td id=day4row4></td><td id=day5row4></td><td id=day6row4></td><td id=day7row4></td></tr>
<tr><td id=day1row5></td><td id=day2row5></td><td id=day3row5></td><td id=day4row5></td><td id=day5row5></td><td id=day6row5></td><td id=day7row5></td></tr>
<tr><td id=day1row6></td><td id=day2row6></td><td id=day3row6></td><td id=day4row6></td><td id=day5row6></td><td id=day6row6></td><td id=day7row6></td></tr>
</table>
</tr>
</table>
</form>

<script>
window.resizeTo(274,225)
window.moveTo(250,300)
monthsInYear = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") // Months to evaluate into objects


function calendar(minDt,maxDt,dateObj) { // The idea is that dateObj will be a form element from calling window that is populated when user clicks a valid date
// Global
calendarMinDate= minDt
calendarMaxDate= maxDt
calendarSelectDate = new Date()

// ********* see - dates do get passed correctly!! ********
alert(calendarMinDate)
alert(calendarMaxDate)

// so why doesn't the program work from now on [??

currentMonth=calendarSelectDate.getMonth()

// If current Month is December, then allow an extra year to be shown just in case any future dates may need to be selected
var addYear=1*(calendarMaxDate.getMonth() ==11)

for (var i=calendarMinDate.getFullYear(); i <= calendarMaxDate.getFullYear() + addYear; i++) {
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length] = new Option (i,i)
if (calendarMaxDate.getFullYear() == i)
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length -1].selected = true
}
updateCalendar()
}


function updateCalendar() {
// Get number of days in the month
var oneHour = 1000 * 60 * 60
var oneDay = oneHour * 24
var thisMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), 1) // Get 1st of Month
var nextMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth() + 1, 1) // Get 1st of Next Month
var daysInMonth = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour) / oneDay) // Take into account time zones

monthTxt.innerHTML = "<B>" + monthsInYear[calendarSelectDate.getMonth()] + monthTxt.innerHTML.substr(6) // Change Month Text
eval(monthsInYear[currentMonth]).style.backgroundColor="F7D700" // Reset Last Selected Month Background Color
currentMonth=calendarSelectDate.getMonth()
eval(monthsInYear[calendarSelectDate.getMonth()]).style.backgroundColor="lime" // Set selected month background color

// Clear All Cells Before Repopulating
for (var row=1; row < 7; row++)
for (var day=1; day < 8; day++)
eval("day"+day+"row"+row).innerText = " " // Get cell ID & Set Cells Outside Calendar Range To a Space

// Get 1st Of Month Position Start
day=thisMonth.getDay()
if (day==0)
day=7 // Sunday is day 0, but is 7 in this calender

var row=1
for (var dy=1; dy < daysInMonth + 1; dy++) {
var tmpDate= new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), dy) // Compare Date for Range
var cellName = eval("day"+day+"row"+row)

// **************************************************************************************************** *****
// ***** this is where the problem becomes apparent - why?? *****
// **************************************************************************************************** *****
if ((tmpDate >= calendarMinDate) && (tmpDate <= calendarMaxDate))
cellName.innerHTML = "<div onClick='putDate(this.innerText)'>" + dy + "</div>"
else
cellName.innerHTML = "<B><font color=gray>" + dy + "</font></B>"
/* OK from now on */

if (day++ ==7) {
day=1 // Reset to Monday
row++
}
}
}

function selectMonth(selMonth) {
calendarSelectDate = new Date(calendarForm.calendarYear.value,selMonth,1)
updateCalendar()
}

function selectYear() {
calendarSelectDate = new Date(calendarForm.calendarYear.value,currentMonth,1)
updateCalendar()
}

function putDate(day) {
if (day.length == 1)
day="0"+day

var month=monthsInYear[calendarSelectDate.getMonth()].toUpperCase()
var dateString=day + month + calendarSelectDate.getFullYear()
alert(dateString)
}

// Uncommenting below enables THIS program to work correctly - replaces the code which i want to be called fromt another window.
//calendar(new Date(2002,03,20),new Date(2003,06,03)) // Execute calendar

</script>
Khalid Ali
07-10-2003, 10:19 AM
If you are clloking for a calendar script here is one

http://forums.webdeveloper.com/showthread.php?s=&threadid=12610
freefall
07-10-2003, 10:36 AM
Okay, when you insert my code that I gave you before you replied the last time, tell me exactly what the error/problem/malfunction is. I don't see anything wrong with the script, but I don't know your exact intents.
- Ian
codeDude
07-10-2003, 10:48 AM
Ian,

The intent is to pass from any window 3 parameters.

The first two should define the upper and lower boundaries for selection. The third should pass the input field reference as this should be updated. Dates within this range **should be colored blue and be mouse clickable** for the calling window object to be updated with.

As there will be more that once this calendar will be called from another window, this is why the input field reference needs to be passed.

If you just load up the cal program, and remove the comment (//)
//calendar(new Date(2002,03,20),new Date(2003,06,03)
then try out the calender, it will work fine. The valid date range will be colored blue, and you may mouse click on it.

Problem occur only when passing similar dates from another window such as caller.html which i have pasted in previous examples. What happens here is that the dates appear to have been passed correctly, but when you use the calendar, now the valid dates are NOT shown blue and are NOT mouse clickable.

The point is, functionality changes when the cal program is called by another program. I cant see the logic in this.

- paul
freefall
07-10-2003, 11:40 AM
Yeah but, they ARE highlighted when called from another window, up to the specified date, somewhere in october...

<! caller.html >
<html>
<head>
<script>
minDate= new Date(2002,2,2)
maxDate= new Date(2003,9,9)
</script>
</head>
<body>
<form name="form1">

<table width="30%">
<tr>
<td><a href="javascript:var cal=window.open('cal.html','','scrollbars=no');cal.calendar(minDate,maxDate);"><img src="calendar.gif"></a></td>
</tr>
</table>

</form>
</body>
</html>


<! cal.html >

<HTML>
<style>
body {font-family:Arial; align:middle}
table {background-color:FFEC33}
#head td {color:black; background-color:F7D400; width:32}
div {color:blue; font-weight:bold; cursor:hand}
</style>
<BODY onResize="window.resizeTo(274,225)" leftMargin=0 rightMargin=0 topMargin=0 bottomMargin=0>
<FORM name="calendarForm">

<table style="text-align:center; font-size:12" cellspacing=0 cellpadding=1 border=0>
<tr style="background-color:F7D700; color:blue; cursor:hand">
<td id=Jan onClick="selectMonth(0)">Jan</td><td id=Feb onClick="selectMonth(1)">Feb</td><td id=Mar onClick="selectMonth(2)">Mar</td>
<td id=Apr onClick="selectMonth(3)">Apr</td><td id=May onClick="selectMonth(4)">May</td><td id=Jun onClick="selectMonth(5)">Jun</td>
<td id=Jul onClick="selectMonth(6)">Jul</td><td id=Aug onClick="selectMonth(7)">Aug</td><td id=Sep onClick="selectMonth(8)">Sep</td>
<td id=Oct onClick="selectMonth(9)">Oct</td><td id=Nov onClick="selectMonth(10)">Nov</td><td id=Dec onClick="selectMonth(11)">Dec</td>
</tr>
<tr><td colspan=12>
<table style="color:blue; text-align:center; font-size:14">
<tr><td id=monthTxt colspan=12 height=34 style='color:blue'><B>xxx</B> <select name=calendarYear onChange="selectYear()"></select></td></tr>
<tr id=head><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td></tr>
<tr><td id=day1row1></td><td id=day2row1></td><td id=day3row1></td><td id=day4row1></td><td id=day5row1></td><td id=day6row1></td><td id=day7row1></td></tr>
<tr><td id=day1row2></td><td id=day2row2></td><td id=day3row2></td><td id=day4row2></td><td id=day5row2></td><td id=day6row2></td><td id=day7row2></td></tr>
<tr><td id=day1row3></td><td id=day2row3></td><td id=day3row3></td><td id=day4row3></td><td id=day5row3></td><td id=day6row3></td><td id=day7row3></td></tr>
<tr><td id=day1row4></td><td id=day2row4></td><td id=day3row4></td><td id=day4row4></td><td id=day5row4></td><td id=day6row4></td><td id=day7row4></td></tr>
<tr><td id=day1row5></td><td id=day2row5></td><td id=day3row5></td><td id=day4row5></td><td id=day5row5></td><td id=day6row5></td><td id=day7row5></td></tr>
<tr><td id=day1row6></td><td id=day2row6></td><td id=day3row6></td><td id=day4row6></td><td id=day5row6></td><td id=day6row6></td><td id=day7row6></td></tr>
</table>
</tr>
</table>
</form>

<script>
window.resizeTo(274,225)
window.moveTo(250,300)
monthsInYear = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") // Months to evaluate into objects

function calendar(minDt,maxDt) {
// Global
calendarMinDate= new Date()
calendarMinDate.setFullYear(minDt.getFullYear())
calendarMinDate.setMonth(minDt.getMonth())
calendarMinDate.setDate(minDt.getDate())

calendarMaxDate= new Date()
calendarMaxDate.setFullYear(maxDt.getFullYear())
calendarMaxDate.setMonth(maxDt.getMonth())
calendarMaxDate.setDate(maxDt.getDate())
calendarSelectDate = new Date()

currentMonth=calendarSelectDate.getMonth()

// If current Month is December, then allow an extra year to be shown just in case any future dates may need to be selected
var addYear=1*(calendarMaxDate.getMonth() ==11)

for (var i=calendarMinDate.getFullYear(); i <= calendarMaxDate.getFullYear() + addYear; i++) {
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length] = new Option (i,i)
if (calendarMaxDate.getFullYear() == i)
calendarForm.calendarYear.options[calendarForm.calendarYear.options.length -1].selected = true
}
updateCalendar()
}


function updateCalendar() {
// Get number of days in the month
var oneHour = 1000 * 60 * 60
var oneDay = oneHour * 24
var thisMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), 1) // Get 1st of Month
var nextMonth = new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth() + 1, 1) // Get 1st of Next Month
var daysInMonth = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour) / oneDay) // Take into account time zones

monthTxt.innerHTML = "<B>" + monthsInYear[calendarSelectDate.getMonth()] + monthTxt.innerHTML.substr(6) // Change Month Text
eval(monthsInYear[currentMonth]).style.backgroundColor="F7D700" // Reset Last Selected Month Background Color
currentMonth=calendarSelectDate.getMonth()
eval(monthsInYear[calendarSelectDate.getMonth()]).style.backgroundColor="lime" // Set selected month background color

// Clear All Cells Before Repopulating
for (var row=1; row < 7; row++)
for (var day=1; day < 8; day++)
eval("day"+day+"row"+row).innerText = " " // Get cell ID & Set Cells Outside Calendar Range To a Space

// Get 1st Of Month Position Start
day=thisMonth.getDay()
if (day==0)
day=7 // Sunday is day 0, but is 7 in this calender

var row=1
for (var dy=1; dy < daysInMonth + 1; dy++) {
var tmpDate= new Date(calendarSelectDate.getFullYear(), calendarSelectDate.getMonth(), dy) // Compare Date for Range
var cellName = eval("day"+day+"row"+row)
// Below changes text to blue and allows mouse Click- Fail Point when called from another program
if ((tmpDate >= calendarMinDate) && (tmpDate <= calendarMaxDate))
cellName.innerHTML = "<div onClick='putDate(this.innerText)'>" + dy + "</div>"
else
cellName.innerHTML = "<B><font color=gray>" + dy + "</font></B>"

if (day++ ==7) {
day=1 // Reset to Monday
row++
}
}
}

function selectMonth(selMonth) {
calendarSelectDate = new Date(calendarForm.calendarYear.value,selMonth,1)
updateCalendar()
}

function selectYear() {
calendarSelectDate = new Date(calendarForm.calendarYear.value,currentMonth,1)
updateCalendar()
}

function putDate(day) {
if (day.length == 1)
day="0"+day

var month=monthsInYear[calendarSelectDate.getMonth()].toUpperCase()
var dateString=day + month + calendarSelectDate.getFullYear()
alert(dateString)
}

// Uncommenting below enables program to work correctly!
//calendar(new Date(2002,03,20),new Date(2003,06,03)) // Execute calendar

</script>


This is how it is on my computer, it highlights just fine, are we on the same page here? Save this exact version to your computer and try it, if it still doesn't work... i dont know
- Ian
codeDude
07-11-2003, 02:27 AM
Ian,

You fixed it!

The code below:

calendarMinDate= new Date()
calendarMinDate.setFullYear(minDt.getFullYear())
calendarMinDate.setMonth(minDt.getMonth())
calendarMinDate.setDate(minDt.getDate())

calendarMaxDate= new Date()
calendarMaxDate.setFullYear(maxDt.getFullYear())
calendarMaxDate.setMonth(maxDt.getMonth())
calendarMaxDate.setDate(maxDt.getDate())

I understand what it does, but I dont understand why it is necessary when a date is passed in to the function anyway?

Please explain...

Top marks to you and thanks for your patience.

Paul.
freefall
07-11-2003, 08:49 AM
Well, I could give you a mumbo jumbo hunky dory answer, but the truth is, I don't exactly know. What I would speculate is that when you set define a date object and set it equal to another, something gets misaligned, sets the year as the date, for example. So I tried just making sure everything got filtered into the right channels and it worked.

If any expert knows, feel free to chime in!
- Ian
freefall
07-11-2003, 06:20 PM
=) there ya go, showin me up! haha
Thanks, I'll keep that in mind for myself, too... setTime(). I love this forum, learn something new every day!

- Ian
codeDude
07-14-2003, 04:21 AM
FreeFall,

I think I may have missed a point here somewhere. Are you implying that setTime() is the recommended fix?

- paul
freefall
07-18-2003, 09:40 PM
Well, pyro or someone had posted a reply to this, where they used the setTime() function, but then they deleted it, so it sounded like I was talking to myself. I've been away for awhile, but if I remember correctly, the way i told you before i mentioned setTime() worked fine.
- Ian