Monday, March 10, 2008

DateChooser with support for backgroundColoring some dates

I got a query recently asking whether it is possible to have the DateChooser highlight certain special dates with a different background color. The query was accompanided by a DateChooser code which achieved this by using the TexField.backgroud and TexField.backgroudColor properties (similar to my other posts for DG row background coloring). But the draw back of the approach was that selection and roll over feedback was not working.

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" }

Update: There seems to be some problem with library path handling etc due to which a swc is not getting picked up properly in FB. 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

103 comments:

jhall said...

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

Sreenivas said...

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 !

Josel3 said...

Thank you! It was what I was looking for, I'm gonna try it :) thanks !!! ^^

Dan said...

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?

Sreenivas said...

Yes. This includes the changes for selectableRanges.

Dan said...

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?

Sreenivas said...

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.

Jesse said...

Does your Flex 2 version have the ability to change the BG colors?

Sreenivas said...

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.

Court said...

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.

Sreenivas said...

I don't see that problem at all. Pposting a sample where it is failing would help !

Guy said...

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.

Sreenivas said...

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 !

m.lefeb said...

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!

Pag said...

Hello, exactly what I was looking for ! Thanks a lot ! I do need to have multiple specialDatesColors, did Guy gave you the source ?

Sreenivas said...

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.

m.lefeb said...

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!

Jeremy said...

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

Malko said...

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?

Grestaxica Bone said...

Ditto - nothing happens for me either

Sreenivas said...

Hey Guys,

Thanks for posting your problems.

I will take a look into this today.

Thanks for your patience !

Sreenivas said...

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

Malko said...

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

Sreenivas said...

DateChooser with support for multiple specialDateColors can be found here

Eranda said...

Grate work thanks

Eranda said...

please can you give example how /what methods that can be use to select multiple specialDateColors thanks

Sreenivas said...

specialDates = [ individual dates or array of dates ]

like "01/01/2009", [ "02/01/2009", "02/04/2009" ], ....

and matching specialDateColors = [ 0xFF0000, 0x00FF00 ]

Eranda said...

is that possible to select two ranges with two different colors

Eranda said...

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

antony said...

hello.I really don`t understand when the program call DateChooserIndicator.updateDisplayList to draw the background.. could you explain?

antony said...

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?

Jeremy said...

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

Roman said...

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

Czar said...

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?

Alice said...

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.

Malko said...

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?

Malko said...

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?

Hemanth said...

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."

Nathan J said...
This comment has been removed by the author.
Nathan J said...

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

Sreenivas said...

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.

Sreenivas said...

You can refer to the sample app source provided too.

Nathan J said...

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.

Sreenivas said...

Have you tried the following?

dch.specialDates= [date1, date2, date3]
dch.specialColors = [ color1, color2, color3]

Jukka said...

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?

Nathan J said...

What exactly doesn't work?

Jukka said...

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

Nathan J said...

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.

Jukka said...

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?

Nathan J said...

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.

Joseph said...

I am trying to implement the calendar, and after downloading the library project and the mxml code, I created a MXML project. The main application is the mxml source file. I linked the swc file into the build library path of the mxml project and included the src folder in the folders to include but I get an error saying "Cannot resolve attribute 'specialDatesColor' for component type mx.controls.DateChooser. I have spent hours on this and have not had any success. Also, how do you change the name of the component.

Thanks,
Joseph

Joseph said...
This comment has been removed by the author.
Joseph said...

I finally have no compile errors but when I export it my browser crashes any thoughts why and how to fix it?

Joseph said...

SIGH! I finally got it working after much effort. For some reason the random generate dates was causing flash player to crash so I used a static date and currently am retrieving dates from a database and it shows it fine. YEAY!

janne said...

First of all, thanks for posting the code!

I got the calender to work, from your sample application code.

But I have problems with the presentation. First of all I have to manually to set headerColor to prevent errors. Next, the calender background is all in black with black text and the next/prev months buttons is missing. What have I done wrong?

(I included the swc-file into the Library-path)

Thanks in advance!

Jan

Nathan J said...

Hi Jan,
Do not use the swc file.
Put all the files besides the swc into the src folder and then try it. Should work without fixes.
Nathan

janne said...

@Natan J: Thanks for your replay! I see your comments now about not using the swc.

Sorry for this newbie-question, how hard can this be? ;-) I have this structure: MyProj/src/mx/ where mx is the directory copied from the from Flex3Ex3-source.

Still Flex can't resolve mx:ChooserEx to an implementation. Shouldn't Flex look in /MyProj/src/mx? Tried to create a new namespace for this component without luck.

Nathan J said...

Well shoot, I guess I don't know why yours is not working. Once you put just the files into your src folder it should find them. Maybe make a new one and put them in afresh. Other than that it should work fine.

Nathan

Nelly said...
This comment has been removed by the author.
Olafecorcam said...

hi,

I'm getting the same problem as janne, i had all the code in my project, and wasn't using the SWC, and the layout was all messed up, the next month button and previous button is missing, and if i don't specify the "headerColors" tag..
i get an error, and i also when i clicked in any date i got another error that i fixed changing the line number 2997 on the DataChooserEx.as to the following code
_selectedDate = CalendarLayoutEx(event.target).selectedDate;

I tried both ways, using the SWC and not using, and the layout is messed up anyway. Can anybody help me, i'd really appreceate that.

Thanks
Leandro

janne said...

Maybe it's my lack of talent but I never got it to work properly. It seems so easy but I have spent hours in order to make it work.

I ended up with the selectedRanges route. I can live without the rollovers on the selected days.

http://kevinyeandel.wordpress.com/category/flex-3-actionscript/

Sreenivas said...

Hi Leandro,

which version of FB and SDK are you using ?

If you can send me a sample project showing the problem I will be glad to look into it.

Mail it to sreenivas.ramaswamy@gmail.com.

Sreenivas said...

though I addressed the above comment to Leandro, if others who are facing the problem can send me a sample project I would be happy to help !

Sreenivas said...

I was not explicit about this but I thought the sample code would make it clear.

The latest code required for the component to have this feature is DateChooser and NOT DateChooserEx. DateChooserEx in the source folder is a little older version of similar changes.

Please use DateChooser from the source code provided.

janne said...

Excellent. Now it's working for me. Thank you!

me said...

Hi,

There is a problem when the calendar is included into an Advanceddatagrid.

First time, the top calendars are painted (not bottom), but after scrolling the ADG then they become invisible.

Please, see this video:
http://www.upversion.com/downloads/calendar_missing.mpeg

Thanks in advanced,
Pablo.

me said...

Solved!.

The scroll problem came from ADG, not CalendarLayout.

Your component works very fine.

Thanks a lot!!!!!!!

Tim Oxley said...

@Sreenivas,

Maybe you could simply provide an swc download for all those who are having difficulty building this.

Regards,

Tim Oxley

msat said...

Sreenivas,

how do I enable multiple colors for arrays of dates? is that possible?

I downloaded it Flex3Ex2, but not sure how to enable multiple colors. I tried to pass in two colors for specialDatesColors and i see black color rendering. One color works fine..

your component is amazing one. should be in the flex sdk.


i am referring to this on your post...

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.

Thomas said...

Hi Sreenivas,
Is there any chance of getting step by step instructions on how to get this to work under Flex Builder with the 3.4 SDK in a new project? This is exactly what I am looking to accomplish and would like to get a better understanding of it. Please contact me if you are available to help.

Sreenivas said...

Mail me a sample project that is not working with 3.4 I will take a look.

Mail it to sreenivas.ramaswamy@gmail.com.

Sreenivas said...

@msat date colors can be set using the following syntax.

specialDateColors = [ 0xFF0000, 0x00FF00 ]

Is it not working ?

Einfo said...

Mail me a sample project that is not working with 3.0 I will take a look.

Mail it to jorge.londono@einfonet.net

Felipe Martins said...

Hi,

I got the same problem to open up the project in my workspace in FB.

To fix the problem I created a Flex Project from scratch and overwritten the src folder and the .mxml by the files that I downloaded here from Sreenivas. Not it's working perfectly.

Thanks Sreenivas.

Cheers,
Felipe.

uzay911 said...

I want to change shown today date with the date coming from server when application initiliaze How can i make this?

Nathan J said...

Is the date coming from the server "today's date" or is it a date in the future or past?

Joseph Hillhouse said...

You would need to use php. Have a http service request with a php file similar to the following:
Make sure to include the date tag for xml before and after date. Repace xml tag with date in less than and greater than signs. I can't type it in with blogger.

//echo 'xmltag';
echo date("d/m/Y");
//echo 'closing_xml_tag';




In the httpservice it would have
a result event calling an actionscript function similar to the following:

//store dates to be highligthed
[Bindable]
public var dateRanges:Array = [];

public function highlightDates(event:ResultEvent):void{
var retResult:Object = event.result;
var currentdate:Date = new Date(retResult.date.toString());
dateRanges.push(currentdate);
//where viewDates is id of date chooser
viewDates.specialDates = dateRanges;

}

Joseph Hillhouse said...

To clarify, after putting the xml date in the echos remove the comments. Also you would need to call the httpservice when the application initializes ie. httpServiceId.send();

Hope this helps.

shiba prasad said...

Not working in flex 3.0

i added as swc
i added as source ( as shown in pic)

nothing is working
even i create a new project and did the above steps, but the result is same.

please tell me how to proceed...

jaskooo said...

This is exactly what i was looking for. Many thanks

jaskoo
POLAND

caeycae said...

Have you tested this lib in flex 4?

It gives me a error, that say "you can not create the property specialDates to DateChooser"

Tanks!

Nathan J said...

Whats the SDK Version you are using?

caeycae said...

I'm using flex4sdk_b2_100509

caeycae said...

Im working in Flex Builder 3.

In Flex SDK 3 works fine

Flex 4 SDK you can find it in http://download.macromedia.com/pub/labs/flex/4/flex4sdk_b2_100509.zip

Nathan J said...

Upgrade to a newer version of the sdk and it should work fine

caeycae said...

Tanks for quick replay

i try it whit flex_sdk_4.0.0.10485

this is the Runtime error:

ReferenceError: Error #1056: No se puede crear la propiedad specialDatesColor en mx.controls.DateChooser.

It's like the code is trying to use te default DateChooser.

I icluded the source code within my proyect. (i testes in a new one also)

Tanks

Nathan J said...

Seems to work fine with SDK 4.1

m said...

I am using SDK version 4.1.0.14403 and I am seeing the same error:
Cannot create property specialDatesColors on mx.controls.DateChooser.

Not sure why its not seeing the monkey patched files. Any ideas?
Btw, I am using Flexbuilder

m said...

The problem seems to go away if I set the following compiler argument:
-static-link-runtime-shared-libraries=true

however, I am left with a DateChooser with practically no styling and each cell in the dategrid is black.

Any ideas? Perhaps I have to include defaults.css somehow? but I am not sure how to do that in Flex 4

Nathan J said...

Not sure where the error your getting is coming from. I don't get it when I run it. Um, post the whole line of code that it's faulting on.

m said...

I got it!! I simply had to copy the defaults.css file from the framework (frameworks/projects/framework/defaults.css) to my project. Then I removed all css unrelated to DateChooser. Lastly, make sure that you are referencing the new css file and it all works

m said...

Nathan, if I remove the compiler argument: -static-link-runtime-shared-libraries=true then I get the following stacktrace:
ReferenceError: Error #1056: Cannot create property specialDatesColors on mx.controls.DateChooser.
at mx.core::Container/createComponentFromDescriptor()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:4285]
at mx.core::Container/createComponentsFromDescriptors()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:4160]
at mx.core::Container/createChildren()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:3187]
at mx.core::UIComponent/initialize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7250]
at mx.core::Container/initialize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Container.as:3129]
at mx.core::Application/initialize()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\Application.as:1049]
at datechooser/initialize()
at mx.managers.systemClasses::ChildManager/childAdded()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:189]
at mx.managers.systemClasses::ChildManager/initializeTopLevelWindow()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\systemClasses\ChildManager.as:341]
at mx.managers::SystemManager/initializeTopLevelWindow()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2810]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::kickOff()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2637]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::preloader_completeHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\SystemManager.as:2539]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\preloaders\Preloader.as:515]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()

I think this is because the framework is cached without this compiler argument so it does not read our monkey-patched version

caeycae said...

M:

I´m set compiler argument: -static-link-runtime-shared-libraries=true

And i add the default.css in my code


but the syles dont appear be fixed...

Tanks for help

m said...

Try explicitly setting the background Color i.e.

I think its not picking up the TypeSelectors in the css file

m said...

looks like my mxml got removed:

backgroundColor="#ffffff"

Siddharth said...

Hi , Sreenivas , this is awesome ! Just what I wanted. I was wondering if I could use it for free or modify it?

Sreenivas said...

Siddharth, please feel free to use it as is or a modified version !

RafaƂ said...

I have problem with this component when I want use it in application where I use spark. Background of body is always black, can't see days. I notice that this chooser doesn't see styles. I alway have error with null color in headerColor. Any ideas?

Joseph Hillhouse said...

Rafal:
It's been awhile since I've looked at this component but it was written for Flex Builder 3 and there have been changes in the way components are styled in Flash Builder 4. I would try setting your compiler to Flex 3.5 and use mx: tags versus s: tags.

Also, I am an Adobe Flex certified expert and am trying to organize Flex training classes. If you are interested, you can email me at joseph@cyberlightsystems.com or call the office phone (703) 881-7714 to register with a discounted price. The website is http://cyberlightsystems.com. If you try to register on the website you will not get as good a discount. The best way to reach me is through email.

Thanks,
Joseph

Alexander said...

I've been using this in a production for about a year - thank you for writing it.

We're migrating to Flex 4. Flex 4 complains, saying:

3608: 'getColorNames' has been deprecated since 4.0. Please use 'IStyleManager2.getColorNames on a style manager instance

***If anyone has created a Flex 4 version, could you please post it? That would be awesome.***

Alexander said...

Here's the solution for anyone wanting to use a DateChooser with coloring in Flex 4:

http://flexmonkey.co.uk/ColorfulDateChooser/Calendar.html

ncreason said...

All of the links lead to a Google download page that dosn't work. This sounds like excatly what I need but cant see source or the running app in the window. Any ideas?

Nathan J said...

http://flexmonkey.blogspot.com/2010/06/displaying-color-coded-events-in-flex.html

This is a new one.

Also check out this Adobe help file.
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00002180.html

I'm pretty sure you can now simply change the "backgroundColor" of each specific day.