3 Replies Latest reply on Jan 30, 2014 12:32 PM by rickclark54

    How Can I get CF CAL to advance the month in IE9

    rickclark54 Level 1

      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","Octo ber","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#()">[C]</a>

      </cfif>

      </cfoutput>

       

      <cfcatch type="Any">

      <script language="JavaScript">

      alert("You must supply a value for the FORMNAME & TARGET attributes!")

      </script>

      </cfcatch>

      </cftry>

        • 1. Re: How Can I get CF CAL to advance the month in IE9
          Carl Von Stetten Adobe Community Professional & MVP

          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.

          • 2. Re: How Can I get CF CAL to advance the month in IE9
            BKBK Adobe Community Professional & MVP

            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>?

            • 3. Re: How Can I get CF CAL to advance the month in IE9
              rickclark54 Level 1

              Thanks gentleman for your help.

              I decided to look for a newer javascript cal and it appears to be working fine.