CFCALENDAR Tip - (..This must be Belgium)

Having a bit of free time the other day, I decided to get in touch with my inner flash/actionscript/flex coder. Let me be honest... I do not have one. But I found a great tip by Paul Robertson (thanks to an entry on coldfusionusers.com) which helped me get started. It showed how cfdumping a flash form reveals the inner workings of cfform. After seeing the raw flex code behind cfform, the Flex documentation suddenly made a whole lot more sense.

Since I was curious about cfcalendar, I create a test form with a calendar and dumped it. While examining the flex output I noticed an interesting property called disabledRanges.

It is the journey that matters

Though cfcalendar only allows you to disable a range of dates, the flex documentation reveals the disabledRanges property can be used to disable individual dates. After a bit of trial and error with date objects I finally got it working. Of course after I figured this out, I found a great entry on just this topic by Nick Watson .. from two years ago ;-) Ah, well.

Another interesting property in the documentation is disabledDays. Say you want to display a calendar that only allows Tuesdays to be selected. You can use this property to do just that.

So if you were unaware of them, these two properties can come in handy with cfcalendar.

Disable Days of the Week

<cfsavecontent variable="disableDates">
 // disable all days EXCEPT Tuesday (2)
 testCalendar.disabledDays = [0,1,3,4,5,6];
</cfsavecontent>

<cfform name="testForm" format="flash" onLoad="#disableDates#">
 <cfformitem type="text">Disable all days except Tuesday</cfformitem>
 <cfcalendar name="testCalendar">
</cfform>

Disable Individual Days

<cfset selectedDate = "2008-09-30">
<cfset datesToDisable = "2008-09-01,2008-09-15,2008-09-26">
<cfoutput>
<cfsavecontent variable="disableDates">
 // convert the cf list to an actionscript variable
 var #toScript(datesToDisable, "list", false, true)#;
 var dates:Array = [];
 // convert each value to an actionscript date object
 <cfloop list="#datesToDisable#" index="currDate">
     var #ToScript( parseDateTime(currDate), "d", false, true )#;
     // add each object to the array of disabled dates
     dates.push( d );
 </cfloop>
 // set the dates as disabled
 testCalendar.disabledRanges = dates;
</cfsavecontent>
</cfoutput>

<cfform name="testForm" format="flash" onLoad="#disableDates#">
 <cfformitem type="text">Disable non-contiguous dates</cfformitem>
 <cfcalendar name="testCalendar" selecteddate="#selectedDate#">
</cfform>