If you've done much work with the dateChooser component in Flex 2 you know that it can be a little restrictive. I was recently working on an app where I wanted to load a list of dates from an XML file and somehow identify that those dates were clickable on the calendar. Turns out the only way to do this is to disable all of the other dates. I ended up dynamically building an array of start and end dates to pass to the disabledRanges method of the dateChooser component. The code is below. This may be obvious to many of you but it caused me a great deal of pain, one important thing to note is to be sure that the elements of your array are Date objects, not strings. Strings won't work....believe me.
The only input for the function is an array collection containing the dates that you want ENABLED.
private function setValidDates(validDates:ArrayCollection):void{
var rangeArray:Array = new Array;
var millisecondsPerDay:int = 1000 * 60 * 60 * 24;
for(var i:Number = 0; i < validDates.length; i++){
var startIndex:Number;
if (i > 0){
startIndex = (i-1);
} else {
startIndex = i
}
var startDate:Date = new Date(validDates[startIndex].getTime() + (1* millisecondsPerDay));
var endDate:Date = new Date(validDates[i].getTime() - (1 * millisecondsPerDay));
if(i == 0){
rangeArray.push({rangeStart:new Date("Jan 1 1906"),rangeEnd:new Date(endDate)});
} else if(i != validDates.length && i != 0){
rangeArray.push({rangeStart:new Date(startDate),rangeEnd:new Date(endDate)});
}
}
startDate = new Date(endDate.getTime() + (2*millisecondsPerDay));
rangeArray.push({rangeStart:new Date(startDate)});
myCal.disabledRanges = rangeArray;
}
***UPDATE***
I received a comment recently asking for a sample of the XML used in the example above. I've included a snippet here.
<?xml version="1.0" encoding="utf-8"?>
<calendar>
<calItem>
<date>1/7/2007</date>
<milestone>Dad's Birthday</milestone>
<time></time>
<location></location>
<notes>Don't forget to pickup the balloons and the cake at the store before 5:00 on Friday.</notes>
</calItem>
<calItem>
<date>12/6/2006</date>
<milestone>Christmas Party</milestone>
<time>7:00pm</time>
<location>The Wave Room</location>
<notes></notes>
</calItem>
</calendar>
5 comments:
Can you post a sample XML file that you would read in with this item? Are you able to make the enabled dates a certain color? This seems like a really simple solution to a basic calendar component which is great.
I updated the post above with a snippet of the XML file I used in this example. With regard to changing colors while I haven't tried it myself I think you should be able to do this fairly easily by applying styles to the component.
I don't get this one to work, this code looks suspicious:
for(var i:Number = 0; i 0) {
startIndex = (i-1);
} else {
startIndex = i
}
a for-loop with an else? should be an if instead of for? But how would the if look... hmm
@ted
You're right, something must have gotten messed up when I pasted in the code. I've updated it so it should work for you now.
--tim
I would like to simply disable the next month buttton. I noticed there is a style for when that is the case, but how do I flag that disabling?
Post a Comment