I took a look at DateChooser and CalendarLayout and realized that with the current design/implmentation it was not possible to add the backgroundColor support. The selection and rollOver indicators were lower in z order than date UITextFields.
I modified the CalenderLayout code to have three layers (UIComponents). One for background, second for indicators and third one for the dates. After modifying the addChild* and removeChild calls refer to the appropriate layers, the remaining work was to add "speicalDates" and "specialDatesColor" property and wire them up at appropirate places (commitProperties and updateDisplayList) to achive the following result :
I have randomnly generated the special dates in the above sample to keep the sample live on any day it is viewed!
I have added a alpha value of 0.7 in DateChooserIndicator to make the selection indicator show through the backgroundColor. Feel free to tweak this value to your flavor.
The project source to build the Flex3Ex.swc is here. It contains the modified DateChooser and CalendarLayout classes. I posted the complete Flex project here because Travis pointed out that it is difficult for newbies to understand how to use the component source files. Thanks Travis!
The source for the sample app is here.
The components can be further enhanced to support multiple specialDates (array of array of dates) and multiple specialDatesColors.
Update: I got to implement this. Source is available here.
Update: I have updated the source to support the following:
Now dates can be specified as strings "06/01/2009" (for 1st June 2009) but make sure that it succeeds to pass through Date.parse function and returns a valid Date.
Date ranges can be specified as follows:
{ rangeStart:"06/01/2009", rangeEnd:"06/05/2009" }
50 comments:
This is exactly what I was looking for. Great post. I get a warning on compile that src\Flex3Ex.as does not exist. Do you know what causes the warning? It works great out of the box. Thanks so much
I don't see that warning when I build the project locally. The warning means that there is a reference to Flex3Ex.as in the project. I can't seem to find it anywhere !
Thank you! It was what I was looking for, I'm gonna try it :) thanks !!! ^^
Does this background color modification component include the previous mods you made for Extending DateChooser.selectableRange to accept multiple disjointed dates?
Also, i'm confusted as to how to set the components up in FB3... should I rename all the files so as to not conflict with the Flex Framework files?
Yes. This includes the changes for selectableRanges.
thanks S
I read about the directive use mx_internal on Ragu's blog... but I really don't understand it...
How should I use your component in a Flex 3 project? (put the modified files in the src folder, and use xmnls:"*" in the application tag?)
I see how you placed your files in the src folder, but I don't understand how you can use statements like import mx.core.controls in an actionscript file to point at the modified files?
The Flex3Ex source is a project. You can import it into the workspace and build it to generate the Flex3Ex.swc. You can use this swc in any Flex 3 project by placing the SWC in the library path.
You can rename the source files in the Flex3Ex project to change the name of the component. You can even move then to a different package if you like.
Refer to online docs/google for detailed explanation about how to do this.
Does your Flex 2 version have the ability to change the BG colors?
No. It doesn't. But it shouldn't a difficult task to make those modification to Flex 2 component.
One can easily trace the changes I have done to Flex 3 component and make them for Flex 2.
This is a great start of what I was looking for. But a problem occurs when after the component has loaded and the specialDates array has changed.
The existing colored cells are cleared but the new dates aren't colored in.
I don't see that problem at all. Pposting a sample where it is failing would help !
Thanks a lot Shrinivas!
I have enhanced your project to support multiple specialDates (array of array of dates) and multiple specialDatesColors..
and will be glad to post you the source.
Guy.
That is great news!
If you don't mind sharing the code with everyone you can post a link to the source so that everyone can benefit !
Great code! Not sure if Guy's update is what I'll need, but I've been having issues with displaying dates over a span of 4-5 years. It seems like it'll display dates from the earliest year, but subsequent years only shows December dates. How to fix this? Thanks!
Hello, exactly what I was looking for ! Thanks a lot ! I do need to have multiple specialDatesColors, did Guy gave you the source ?
Pag : I have not yet received code from Guy.
m.lefeb :If you can send me sample source showing the problems when 4-5 years is being displayed I can take a look.
fill_dates is executed as a result of an httpservice call, which returns a string of dates from a sql database...
private function fill_dates(event:ResultEvent):void{
tmp_string = event.result as String;
var input:Array = tmp_string.split(",");
for (var i:int = 0; i < input.length; i++)
{
input[i] = new Date(DateField.stringToDate(input[i], "YYYY/MM/DD"));
}
input.pop(); //not sure why, random DEC 1969 date ?
dch.specialDates = input;
}
Thanks a bunch!
Thanks for the code!
I'm trying to use it as the dropdown for a datefield. I can supply it's class name as the dropdownfactory on the datefield, but once I've done that I can't access any of the extra properties (i.e. specialDates) on the dropdown.
Any hints?
Thanks,
Jeremy
I've stumbled upon this and am not having any luck getting this to work correctly. I'm wondering if it's something to do with the Flex 3.1/3.2 being slightly different than the 3.0 that this was coded off of.
If I drop the swc file into my included libs, the DateChooser is not picking up the included changes. Nor, if I rename the DateChooser and recompile, can I see the newly renamed component after including this in a project file.
Thoughts?
Ditto - nothing happens for me either
Hey Guys,
Thanks for posting your problems.
I will take a look into this today.
Thanks for your patience !
There seems to be some problem with library path handling etc due to which the swc is not getting picked up properly.
The work around I came up for this is to include the Flex3Ex/src directory in the source path of the project as shown here
Thanks Screenivas,
I will take a look at this and see if it works. Did you ever get in touch with Guy for the enhanced version code to choose multiple colors? I'd really love to figure that bit out.
Best
DateChooser with support for multiple specialDateColors can be found here
Grate work thanks
please can you give example how /what methods that can be use to select multiple specialDateColors thanks
specialDates = [ individual dates or array of dates ]
like "01/01/2009", [ "02/01/2009", "02/04/2009" ], ....
and matching specialDateColors = [ 0xFF0000, 0x00FF00 ]
is that possible to select two ranges with two different colors
I try the method specialDatesColor()
it not take array as parm so how it posibel select two colors. I use DateChooserEx, how i set the valuse for specialDatesColor() metod . thanks
hello.I really don`t understand when the program call DateChooserIndicator.updateDisplayList to draw the background.. could you explain?
And I defined another specialDates,specialDatesChanged,specialDatesColor in DateChooser.as Class and also in CalendarLayout.as Class .There`re no errors.
I coded in the mxml :
....
private var input2:Array = [];
input2.push(new Date(2009,01,19));
input2.push(new Date(2009,01,20));
input2.push(new Date(2009,01,21));
input2.push(new Date(2009,01,22));
dch.specialDates2 = input2;
.....
It didn`t worked. what can i do next to make these days in another color?
Hey,
I posted this question earlier, just wondering if you had any suggestions on how to go about implmenting your Calendar as a dropdown in a Datefield.
I can supply it's class name as the dropdownfactory on the datefield, but once I've done that I can't access any of the extra properties (i.e. specialDates) on the dropdown.
I can get the dropdown calendar to almost show, but it loses all the styles & skins so it shows up as a black box with white mouse-overs.
Thanks again,
Jeremy
Hi,
I simply can't get your code to work properly. My components background is black and the dates are not colored at all...
Could you maybe post the whole project code as a ZIP (maybe simply with the SWC in the lib folder instead of the whole librar project). This would really help me a lot...
Thanks for your help and the cool code...
Hm.. Now i copied all of your code to my project an it works... Finally ;-)
But i can't get ranges to color properly. Only the start and end date of a range gets colored
for each (var event:EventVO in model.events)
{
specialDates.push([event.startDate, event.endDate]);
}
calender.specialDates = specialDates;
Can you help me out?
I don't know if this is how I should use the example. I put everything in my directory, but I don't think I know how to get the arrays of colors to be customized.
Does this component allow me to customize the color based on the XML?
Can I use the specialDatesColors property of this component to display the color of the background indicator as #FFFFCC for 04/01/2009 and #FFCCFF for 04/02/2009?
I used specialDatesColors="[#99FF33,#FFCCCC, #FFFFCC, #FFCCFF]" but it appears it does not work the way I wanted.
Hey there, with Flex 3.2, Flex3Ex with the specialDatesColors seems to fail as it's not a recognized option. Has anyone else experienced this problem?
On second thought it looks like it's failing once I start using RSL.. I guess it's not picking up the src correctly. Thoughts?
I'm using FlexBuilder 3. I extracted your zip file in a location ( say E:\Flex3Ex2).
i'm creating a project in FlexBuilder called newcalendar. As you mentioned, I've given entry of Flex3Ex.swc in library path ans src folder in source path too.
So when i try to use
public var dateGridExt:CalendarLayoutEx = new CalendarLayoutEx();
i got an error "Type was not found or was not a compile-time constant: CalendarLayoutEx."
I'm dying here.
I cannot get specialDates to accept my array.
this is my array:
http://www.chugachexpress.com/php/filldates.php
what does your random date generator make that specialDates will accept?
What is the exact format that will be accepted by it?
Please help, pulling my hair out.
Nathan
Hey Alice,
If you want to convert your CSS color codes to hex. All you have to do is replace the "#" with "0x".
So it should look like:
specialDatesColors="[0x99FF33,0xFFCCCC, 0xFFFFCC, 0xFFCCFF]"
As far as making them different colors for different days I haven't played with that yet.
--
Nathan
To know the formats that is supported try a sample code in Flex:
Date.parseDate("your date string").
If the above succeeds and returns you a valid number then the format is valid.
You can refer to the sample app source provided too.
Has anyone figured out how to make different dates different colors.
They need to be specific dates and specific colors not just a random array of colors.
Have you tried the following?
dch.specialDates= [date1, date2, date3]
dch.specialColors = [ color1, color2, color3]
Thanks for the cool component! The only setback is that it doesn't seem to work with Gumbo. Is there perhaps a change you could update the component for Gumbo-compatibility?
What exactly doesn't work?
Hi,
Flash Builder gives the following error:
Could not resolve <mx:DateChooserEx> to a component implementation.
The datechooser-component seems to be changed a little (in Gumbo) from what it was in Halo so the problem could be that. Or maybe it's just that it's messing with the mx-namespace. Every other swc I have in my gumbo-project seem to work correctly.
greets, Jukka
Seems to me that you don't have the mx/controls/DateChooserEx.as file in your src folder. Make sure you put all the files from the zip into your src folder.
Hey, thanks! It works like a charm!
But now I'm baffled. Why do I have to include the whole directory tree into my project when the swc contains the same information?
You got me there. I tried the same thing and it didn't work either. So I just put it in there. Not tidy but it works.
Post a Comment