Ask a Jedi: Loading a Page with CFCALENDAR

Anthony asks a question about the CFCALENDAR tag:

I have a simple one... I think. I need to find out how to goto a URL when a date is selected using CFCalendar.

For instance, I choose Oct 17, I want to goto a page a date page with url.date eq "2007-10-17"

I don't know flash, and have no idea how to accomplish what appears to be a simple operation.

Now technically I don't answer questions involving Flash Form stuff anymore. It was a fun feature, but in my opinion I'd use Flex 2 instead. But the calendar tag works in HTML forms as well so I thought I'd take a stab at this.

The docs for cfcalendar mention that it does indeed have an onChange event. However - you have to use ActionScript for this event. Now in theory - the calendar tag is just a Flex control. However - I had no idea what the control was, nor how to extra the current selected date. So I cheated. I know there is a getURL ActionScript function. This will fire off any URL, including a JavaScript one. So I began with this:

<cfform name="myform" action="test3.cfm"> <cfcalendar name="cal" onChange="getURL('javascript:test()')"> </cfform>

All this says is - when the date is selected, run the JavaScript function test (poorly named, I know). My test function then just does this:

<script> function test() { document.myform.submit(); } </script>

As you can see - it submits the form. You would then write code to say if form.cal exists, cflocation and pass along the value.

Archived Comments

Comment 1 by todd sharp posted on 10/19/2007 at 6:25 PM

Rather then submit the whole form (unless that is necessary) he could have used getURL like this too:

onchange="getURL('test.cfm?date='+testCal.selectedDate, '_blank');"

Now be careful because that will pass the full date format (regardless of any mask applied to the tag) which would look like this:

test.cfm?date=Wed Oct 17 00:00:00 GMT-0400 2007

You could also get fancier with ActionScript and do something like this (broken out on seperate lines for readability:

onchange="getURL('test.cfm?month=
'+(testCal.selectedDate.getMonth()+1)+
'&day='+testCal.selectedDate.getDate()+
'&year='+testCal.selectedDate.getFullYear(),
'_blank');"

Note that I add 1 to the month because of the wonderful zero-based index in flashWhich would evaluate to:

test.cfm?month=10&day=19&year=2007

It's a good idea to keep the old AS dictionary bookmarked to help with simple AS functions like this when the need arrises:

http://www.adobe.com/suppor...

Comment 2 by Raymond Camden posted on 10/19/2007 at 6:28 PM

Nice Todd. Is there a built in URL encode function that could be used for the first example?

Comment 3 by todd sharp posted on 10/19/2007 at 6:35 PM

You could do this:

getURL('testdate.cfm?date='+escape(testCal.selectedDate), '_blank');

But if you dump the date you'll notice that CF does not grok the AS dateformat and you'll get a bogus year.

So maybe your solution is the way to go - or my second example above.

Comment 4 by Mikkel Johansen posted on 10/19/2007 at 6:41 PM

I am using the following code to change the source of a CFDIV when a date is selected.

<script language="javascript">
function calendarChanged(day, month, year) {
ColdFusion.navigate(
'#cgi.scriptname#?action=activities&selectedDayStr=' + day + ',' + month + ',' + year,
'mydiv');
}
</script>

<cfform name="myform" action="test3.cfm">
<cfcalendar name="cal"
onchange="getURL('javascript:calendarChanged(\'' + selectedDate.selectedDate.getDate() + '\',\''+ (selectedDate.selectedDate.getMonth()+1) + '\',\''+ selectedDate.selectedDate.getFullYear() + '\')')">
</cfform>

I did not think of just submitting the FORM, but is it possible to make change the target, so it is connected (is that the right word?) to a CFDIV ?

Comment 5 by todd sharp posted on 10/19/2007 at 7:12 PM

You can do a POST with CF.navigate - check the docs.

Comment 6 by Gareth posted on 10/19/2007 at 7:33 PM

In AS, there's also a
DateField.dateToString(myDate, "MM/DD/YYYY")
to convert a date to a string formatted however you want.

Comment 7 by Morten Kruse posted on 10/25/2007 at 4:57 PM

I use the method

onchange="getURL('test.cfm?month=
'+(testCal.selectedDate.getMonth()+1)+
'&day='+testCal.selectedDate.getDate()+
'&year='+testCal.selectedDate.getFullYear(),
'_blank');"

But if i click on the date already chosen I get a
undefined-NaN-undefined

Month undefined
date not a number
Year undefined.

How can I prevent this error?

Comment 8 by todd sharp posted on 10/25/2007 at 5:30 PM

It's not an error - when you re-select the date it sets the value to blank/null/undefined. You can switch to a JS function and conditionally send the user to another page if the date exists/is not blank.

Comment 9 by Anthony posted on 10/30/2007 at 3:47 PM

Works EXACTLY as I need it to... BUT
This test page will not work in IE7. I have NO idea why.
IT works fine in Firefox.

http://www.festing.com/test...

Here is my entire page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...">
<html>
<head>
</head>

<body>
<cfform name="abc">
<cfcalendar name="testCal" width="250"
onchange="getURL('test.cfm?date='+testCal.selectedDate.getFullYear()+'-'+(testCal.selectedDate.getMonth()+1)+'-'+testCal.selectedDate.getDate(), '_self');"
>
</cfform>
</body>
</html>

Since this is not working, and I have not idea why, and I need a calendar jump... I'd like to know what/where/how to see and example of a Flex2 calendar.

Comment 10 by WilGeno posted on 11/7/2007 at 8:53 PM

I ran your test page through my IE debugging tools. This is what I found. Two script errors. Also, I ran you code you posted on my cfmx 7.02 server and it works fine.

---------------
Script Error Informations:
====================
OS Information: Microsoft Windows XP Professional Service Pack 2 (Build 2600)
OS Language: en-us
Browser: Microsoft Internet Explorer 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 0
Web Browser Language: en-us
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Cookies enabled
Java enabled
-------------
Script Error:
//----------------
Line: 53
Character: 1
Code: 0
Error Message: Object expected
URL: http://www.festing.com/test...
//----------------

-------------
Script Error:
//----------------
Line: 5
Character: 1
Code: 0
Error Message: Object doesn't support this property or method
URL: http://www.festing.com/CFID...
//----------------

Regards