Copy link to clipboard
Copied
I am at my wits end. I have built a portal around the CF Calendar only to discover that in IE 9 the CF_Cal will not advance the months. Below is the tag that shows a popup calendar to select the date. In IE9, clicking on the back or forward button does nothing. Any help wuld be appreciated.
<cftry>
<cfif parameterexists(attributes.target) EQ 0>
<cfthrow message="NoTarget">
<cfelseif parameterexists(attributes.formname) EQ 0>
<cfthrow message="NoTarget">
</cfif>
<cfparam name="attributes.date" default="#Now()#">
<cfparam name="attributes.image" default="0">
<cfoutput>
<script language="JavaScript">
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var totalDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31)
function openCalWin_#attributes.target#() {
stats='toolbar=no,location=no,directories=no,status=no,menubar=no,'
stats += 'scrollbars=no,resizable=no,width=300,height=250'
CalWin = window.open ("","Calendar",stats)
var calMonth = #DateFormat(attributes.date, "M")#
var calYear = #DateFormat(attributes.date, "YYYY")#
theDate = new Date(calYear, (calMonth - 1), 1)
buildCal_#attributes.target#(theDate)
}
function buildCal_#attributes.target#(theDate) {
var startDay = theDate.getDay()
var printDays = false
var currDay = 1
var rowsNeeded = 5
if (startDay + totalDays[theDate.getMonth()] > 35)
rowsNeeded++
CalWin.document.write('<html><head><Title>Select a Date</title>')
CalWin.document.write('<STYLE TYPE="text/css">')
CalWin.document.write('A { color: ##000000; font-family:Arial,Helvetica;font-size:14pt; font-weight: bold; text-decoration: none}')
CalWin.document.write('A:hover { color: red; }')
CalWin.document.write('</STYLE></head>')
CalWin.document.write('<body><a name="this"></a>')
CalWin.document.write('<table align=center height=100% width=100% border=2 bordercolor=Black cellpadding=0 cellspacing=0>')
CalWin.document.write('<tr><th bgcolor=Purple colspan=7><font face=Arial color=white>' + months[theDate.getMonth()] + ' ' + theDate.getFullYear() + '</font></th></tr>')
CalWin.document.write('<tr bgcolor="##D18FD3"><th><font face=Arial color=white>Su</font></th><th><font face=Arial color=white>Mo</font></th><th><font face=Arial color=white>Tu</font></th><th><font face=Arial color=white>We</font></th><th><font face=Arial color=white>Th</font></th><th><font face=Arial color=white>Fr</font></th><th><font face=Arial color=white>Sa</font></th></tr>')
for (x=1; x<=rowsNeeded; x++){
CalWin.document.write('<tr>')
for (y=0; y<=6; y++){
if (currDay == 1 && !printDays && startDay == y)
printDays = true
CalWin.document.write('<td align="center" width=14.28%>')
if (printDays){
CalWin.document.write('<a href="javascript:opener.placeDate_#attributes.target#(' + theDate.getMonth() + ',' + currDay + ',' + theDate.getFullYear() + ')">' + currDay++ + '</a></td>')
if (currDay > totalDays[theDate.getMonth()])
printDays = false
}
else
CalWin.document.write(' </td>')
}
CalWin.document.write('</tr>')
}
CalWin.document.write('<form><tr bgcolor="##D18FD3"><td colspan=7 align="center"><input type="Button" size="2" name="Back" value="<<" onClick="opener.getNewCal_#attributes.target#(-1)"><font face=Arial color=white size="1"> Use the arrows to browse through the months.</font> <input type="Button" size="2" name="Forward" value=">>" onClick="opener.getNewCal_#attributes.target#(1)"></td></tr></form>')
CalWin.document.write('</table></body></html>')
CalWin.document.close()
}
function getNewCal_#attributes.target#(newDir) {
if (newDir == -1){
theDate.setMonth(theDate.getMonth() - 1)
if (theDate.getMonth() == 0){
theDate.setMonth(12)
theDate.setYear(theDate.getYear() - 1)
}
}
else if (newDir == 1){
theDate.setMonth(theDate.getMonth() + 1)
if (theDate.getMonth() == 13){
theDate.setMonth(1)
theDate.setYear(theDate.getYear() + 1)
}
}
CalWin.document.clear();
buildCal_#attributes.target#(theDate);
}
function placeDate_#attributes.target#(monthNum, dayNum, yearNum){
var dateString = (monthNum + 1) + '/' + dayNum + '/' + yearNum
document.#attributes.formname#.#attributes.target#.value = dateString
CalWin.close()
}
</script>
<cfif #attributes.image# NEQ 0>
<a href="javascript:openCalWin_#attributes.target#()"><img src="#attributes.image#" border=0></a>
<cfelse>
<a href="javascript:openCalWin_#attributes.target#()">
</cfif>
</cfoutput>
<cfcatch type="Any">
<script language="JavaScript">
alert("You must supply a value for the FORMNAME & TARGET attributes!")
</script>
</cfcatch>
</cftry>
Rick,
Have you tried loading the page using "Compatibility Mode"? If so, does the control work properly then?
Keep in mind that the ColdFusion UI tags are based on 3rd party JavaScript libraries (most likely ExtJS, but some are using YUI) as well as Flash widgets (as in the case of CFCalendar). The underlying JavaScript libraries have not been updated by Adobe in quite some time and are several versions behind. There are likely compatibility issues with more modern browser versions. The tags a
...Copy link to clipboard
Copied
Rick,
Have you tried loading the page using "Compatibility Mode"? If so, does the control work properly then?
Keep in mind that the ColdFusion UI tags are based on 3rd party JavaScript libraries (most likely ExtJS, but some are using YUI) as well as Flash widgets (as in the case of CFCalendar). The underlying JavaScript libraries have not been updated by Adobe in quite some time and are several versions behind. There are likely compatibility issues with more modern browser versions. The tags also don't expose all of the capabilities of those underlying libraries. For these reasons there is a general feeling in the ColdFusion community that these UI tags should not be used any more. Rather, people should develop applications using JavaScript UI libraries directly and avoid relying on ColdFusion's abstraction of these libraries or Flash. There are many JavaScript calendar implementations out there to choose from.
Hope this helps some,
-Carl V.
Copy link to clipboard
Copied
rickclark54 wrote:
<cfif parameterexists(attributes.target) EQ 0>
<cfthrow message="NoTarget">
<cfelseif parameterexists(attributes.formname) EQ 0>
<cfthrow message="NoTarget">
</cfif>
Do you perhaps mean the following:
<!--- Two independent checks --->
<cfif NOT isDefined("attributes.target")>
<cfthrow message="NoTarget">
</cfif>
<cfif NOT isDefined("attributes.formname")>
<cfthrow message="NoForm">
</cfif>
<cfif #attributes.image# NEQ 0>
Do you mean: <cfif len(trim(attributes.image)) NEQ 0>?
Copy link to clipboard
Copied
Thanks gentleman for your help.
I decided to look for a newer javascript cal and it appears to be working fine.