Calendar Control in Flex

Posted on July 3, 2009 by todaystechnography

Its  a Calendar Control developed in Adobe Flex 3.

This control,  both  Weekends and Holidays are selectable and they appear in different color as well.

The very first control which I did was Calendar Control using Flex 3.  It was really hard to make Weekends and holidays in different colors and also selectable.

Initially I tried to make weekends as differnt color using the property disabledDays in DateChooser . Using disabledDays[0,6]  and setting the style for that property we can make weekends to appear in different color. Now its done with Weekend to appear in differnt color. 

Next comes our holidays. And again Flex has a cool option, by using  a property disabledRanges . Using disabledRanges to single day made it possible. I entered all the possible holidays in a XML file  and used HTTPService to read the file.Based on current month and year,I checked for days(dates). If the particular date is available it shows in differnt color.

Thats it..!!! we made it.

But here comes the hardest part in my Calendar control.  Since I used properties like disabledDays & disabledRanges of DateChooser, I was not able to select those days, as its default selectable is false.

And since I’m working in a Company where weekends are still looked like  Friday, Friday , Friday and Monday :) , they want both holidays and weekends as selectable.

I was searching  a lot and found this site which holds the source code of CalendarLayout. 

http://flexpearls.blogspot.com/2008/03/datechooser-with-support-for.html

Brainstorming the source code and you belive it or not, just changing  single  line of code made my Calendar Control to work. And ofcourse you can use the above  link for having background color for different dates. Have a look at it.. its quiet cool!!

In the Calendarlayout source code, inside  the method

mx_internal function setSelectedMonthAndYear(monthVal:int = -1, yearVal:int = -1):void,

just changed this below line ( From true to false)

from

“disabledArrays[columnIndex][rowIndex] = true;” 

to

“disabledArrays[columnIndex][rowIndex] = false;”

just be careful, this line appears 3 times inside the same method. 

And my Calendar Control looks great.

 CalendarControl

Here you can see 12th Dec( Holiday) also weekends are shown in red color.  And the awesome part of it is.. both are selectable :)

Download the source code

Filed under: Calendar Control | Tagged: , , , , , , ,

»

4 Responses

  1. Calendar Control, on August 19th, 2009 at 9:37 am Said:

    [...] Yes, I got the solution. Pls refer this site and download the source code http://todaystechnography.wordpress.com/2009/07/03/5/ [...]

    Reply
  2. todaystechnography, on September 11th, 2009 at 7:37 am Said:

    hi buddy

    Reply
  3. Vasok, on October 6th, 2009 at 9:06 am Said:

    Hi, it’s GREAT! :) But i have one problem with it: i don’t know how to see code on Flex Builder…i just getting sterted working with flex, but i want creat things, like this! please answer and thanks!

    Reply
    • todaystechnography, on October 7th, 2009 at 4:53 am Said:

      Hi Vasok, Either you can import the source code or u can create new files and copy paste the content !!

      1. Create a new Flex Project in Flex Builder 2. Once the Project is created, Right Click on src folder of that Project, Select Import 3. In Import screen, Select File System. –> click next 4. Browse for the source directory from where you have to import. 5. Left hand Side you get all the directories, Select only SRC folder. –> Then click Finish. 6. Build your Workspace. And Execute the MXML or SWF file Thanks, Hemanth

      Reply

Leave a Reply