Thursday, January 1, 2009

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

<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 )#
<!--- convert the end date to a date/time object --->
<cfif structKeyExists(currRange, "end")>
#ToScript( parseDateTime(currRange.end), "range.rangeEnd", false, true )#
<!--- save the new range --->
testCalendar.disabledRanges = rangesToDisable;

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

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.


  © Blogger templates The Professional Template by 2008

Header image adapted from atomicjeep