CFCalendar Tip (Flash): Disable Multiple Date Ranges

Talk about missing the obvious. In a previous entry I mentioned a small tip about disabling individual dates in a cfcalendar using actionscript and the disabledRanges property. As the disabledRanges property is an array, it can also be used to disable multiple date ranges. Now I either missed that fact last time or more likely just could not get it to work at the time ;-)

In any case, the disabledRanges property expects an array of structures. The structure keys being rangeStart and rangeEnd. Here is a simple example that disables both the first and fourth week of December.

<!---
 Create two sample ranges
--->
<cfset rangesToDisable = arrayNew(1)>
<cfset range = { start = "2008-12-01", end = "2008-12-05"} >
<cfset arrayAppend(rangesToDisable, range)>
<cfset range = { start = "2008-12-22", end = "2008-12-26"} >
<cfset arrayAppend(rangesToDisable, range)>


<cfoutput>
<cfsavecontent variable="disableRanges">
   <!--- convert the CF variable into an actionscript array of Date objects --->
 var rangesToDisable:Array = [];
 var range:Object;
 
 <!--- loop through each range --->
 <cfloop from="1" to="#arrayLen(rangesToDisable)#" index="x">
  <cfset currRange = rangesToDisable[x]>
  <cfif structKeyExists(currRange, "start") OR structKeyExists(currRange, "end")>
   range = {};
   <!--- convert the start date to a date/time object --->
   <cfif structKeyExists(currRange, "start")>
    #ToScript( parseDateTime(currRange.start), "range.rangeStart", false, true )#
   </cfif>
   <!--- convert the end date to a date/time object --->
   <cfif structKeyExists(currRange, "end")>
    #ToScript( parseDateTime(currRange.end), "range.rangeEnd", false, true )#
   </cfif>
   <!--- save the new range --->
   rangesToDisable.push(range);
  </cfif>
 </cfloop>   
 testCalendar.disabledRanges = rangesToDisable;
</cfsavecontent>
</cfoutput>

<cfform name="testForm" format="flash" onLoad="#disableRanges#">
   <cfformitem type="text">Disable multiple Date Ranges</cfformitem>
   <cfcalendar name="testCalendar" selecteddate="2008-12-01">
</cfform>

I originally thought it could be done in just two lines of code. The ToScript function is capable of converting arrays, structures and date/time objects. So I thought I could convert the CF variable directly to actionscript like this:

var #toScript(datesToDisable, "ranges", false, true)#;
testCalendar.disabledRanges = ranges;

Unfortunately that did not work because the ToScript function converts the structure keys to lowercase: rangestart and rangeend. That is problematic because the calendar component expects the keys to be in mixed case: rangeStart and rangeEnd. So ultimately the code did nothing because the component could not locate any date ranges. Oh well, I guess that would have been too easy.