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:
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."
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.
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
I finally have no compile errors but when I export it my browser crashes any thoughts why and how to fix it?
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!
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
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
@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.
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
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
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/
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.
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 !
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.
Excellent. Now it's working for me. Thank you!
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.
Solved!.
The scroll problem came from ADG, not CalendarLayout.
Your component works very fine.
Thanks a lot!!!!!!!
@Sreenivas,
Maybe you could simply provide an swc download for all those who are having difficulty building this.
Regards,
Tim Oxley
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.
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.
Mail me a sample project that is not working with 3.4 I will take a look.
Mail it to sreenivas.ramaswamy@gmail.com.
@msat date colors can be set using the following syntax.
specialDateColors = [ 0xFF0000, 0x00FF00 ]
Is it not working ?
Mail me a sample project that is not working with 3.0 I will take a look.
Mail it to jorge.londono@einfonet.net
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.
I want to change shown today date with the date coming from server when application initiliaze How can i make this?
Is the date coming from the server "today's date" or is it a date in the future or past?
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;
}
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.
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...
This is exactly what i was looking for. Many thanks
jaskoo
POLAND
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!
Whats the SDK Version you are using?
I'm using flex4sdk_b2_100509
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
Upgrade to a newer version of the sdk and it should work fine
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
Seems to work fine with SDK 4.1
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
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
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.
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
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
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
Try explicitly setting the background Color i.e.
I think its not picking up the TypeSelectors in the css file
looks like my mxml got removed:
backgroundColor="#ffffff"
Hi , Sreenivas , this is awesome ! Just what I wanted. I was wondering if I could use it for free or modify it?
Siddharth, please feel free to use it as is or a modified version !
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?
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
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.***
Here's the solution for anyone wanting to use a DateChooser with coloring in Flex 4:
http://flexmonkey.co.uk/ColorfulDateChooser/Calendar.html
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?
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.
Post a Comment