For some time I have been wondering whether it was possible to select multiple dates with a cfcalendar. Technically, the answer is no.
After working with flash forms, I realized cfcalendar is based on the DateChooser component in Flex 1.5. Unfortunately, some of the niceties like selecting multiple dates or setting a minimum and maximum year displayed, were not introduced until Flex 2. I did eventually manage to simulate multiple date selections in flash forms, through a series of bizarre code gyrations, numerous expletives and light incantations. But having seen the calendar in Flex 2, I knew it was just a poor re-invention of the wheel.
But being the curious sort, I got to wondering if there was a way to use the Flex 2 calendar, from within ColdFusion 8. I began to realize it might be possible after reading a very interesting tip on Sam Farmer's blog about ColdFusion 8 and its Cool Ability to Compile Flex Applications. I could use it to create a swf containing a Flex 2 calendar. Then embed the calendar in my html form. The same way cfform does with cfcalendar. But I was not sure what to do from there.
<cfimport prefix="cfmxml" taglib="/WEB-INF/lib/cf-bootstrap-for-flex.jar">
protected function onApplicationCreated():void
multiCalendar.allowMultipleSelection = true;
public function getSelectedRanges():Array
<mx:DateChooser id="multiCalendar" width="100%" height="100%"/>
// display the selected ranges from the cfcalendar object
var ranges = document.getElementById(id).getRanges();
var arr = new Array();
arr.push("Selected ranges for: "+ id);
for (var x in ranges)
arr.push("range["+ x +"]===========");
var obj = ranges[x];
for (var y in obj)
arr.push(y +"="+ obj[y]);
<cfset calendarID = "myFlex2Calendar">
swfobject.embedSWF("jspxxxxxxxxxxxxxx.swf","#calendarID#", "163","181", "9.0.0", "swfobject/expressInstall.swf");
<!--- container that will hold the final calendar --->
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0"/></a></p>
<input type="button" value="Show Dates" onClick="showRanges('#calendarID#');">
Voila! A calendar that allows multiple date selections.
Ultimately, I put the code in a cfc to make it completely dynamic. Then added in all of the basic cfcalendar settings, but also Flex 2 specific properties like the year navigation arrows and disabling multiple date ranges. Then passed those properties to flesh through flashVars. Here is an example of the end result. Ignore the ugly test form. If you look closesly, the calendar on the right has year navigation buttons, which I have always missed in cfcalendar.
Bear in mind my Flex skills are basic at best. So this was more of an experiment than anything else. But overall it was a great learning experience about one of the many things you can do with CF and Flex.