Flexlib Scheduling Sample
Recently had to build a component to do some scheduling… so first started to browse for some sample and options I had and found three options: First pay for the iLog Elixir components which has a pretty good scheduling component, but paying for that was not an option to us.
Then I found the Doug’s post about the gantt chart component and flexgeek post (with doug’s same approach). this seemed a good option and actually started to develop it on top of flexgeek’s component, but as I test it found a leak that didn’t allow the grid’s columns to get GC’d and when a drill down/up was made all the columns where removed and added (not really)… also I wasn’t able to show two month in a day view for example.
So, I went for the Third option… the so feared and undocumented scheduling library (now in flexlib, previously in adobe’s lab). Surprisingly I thing it was the best option, don’t know why nobody tried before, maybe the lack of samples… just had to made some modifications to the lib to add some events like click and drag over the items and some timeline modifications so it’ll be like the iLog’s component.
I think that there is a couple of modifications needed in the component and thats it to use the hierarchical classes in flex (my approach wasn’t the best but for time problems it seemed the quick and lazy way), and adding styles and colors.
I haven’t been able to finish it due to a change of priorities in the company but here it is… (viewsource is enabled)
and here is the flexlib source with my modifications (download), I have to separate more my classes from the originals
I’ll be posting more on the modifications I made to the libs
Any feedback will be appreciated

Comments
Excellent work .. but I can not download the code flexlib from http://developyourdream.exofire.net/withBreakPoints/scheduling/flexlib.rar , you can upload this somewhere else?
Thanks
Hi Marcelo,
Thanks to point that out, I moved the site but I forgot that link, you can download it now from the link in the post or directly here
If there is something else with the component just let me know
All the examples I’ve seen of the flex scheduling library use a horizontal layout (i.e. time line across the top). Do you know if it is possible to layout vertically?
I think it can be accomplished, but it may require a little effort. you could check the classes flexlib.scheduling.scheduleClasses.layout.SimpleLayout and flexlib.scheduling.timelineClasses.TimeLineViewer, which handle the layout of the entries and the timeline, all the code is well structured and designed so I think it can be done.
Let me know if you try this
Okay, thanks for the pointers. I’m working at it right now. It seems really well structured to me as well.. just lacking documentation to make some sense out of it all. I’ll let you know if I make an progress.
It is the coolest site, keep so!
Downloaded the flexlib.zip but can’t get the source code for your Scheduler component. Application won’t launch, http://developyourdream.exofire.net/withBreakPoints/scheduling/MyScheduleViewer.html returns a 404 – not found.
Hi Terry,
I moved the blog to another server, surely you accessed the old one, now the blog is in http://withbreakpoints.com/ an the sample you want is in http://withbreakpoints.com/Samples/scheduling/MyScheduleViewer.html
Hope this Helps
Hi Gus,
I’ve been looking at your example and am unable to locate the DailyTimelineEntryRenderer, HourlyTimelineEntryRender, MonthlyTimelineEntryRender classes in any of your folders? I would really appreciate looking at these as its something I’ve been trying to replicate in my own project without any success
Cheers
Hi Andy,
I really have to learn to publish my source correctly :S hehe, I recompiled the app and you should see now those classes, I thought the shouldn’t be in the flexlib swc so I add them in the application, view source to download them (maybe you will have to clear your cache to see the changes)
HTH
Gus
Thanks for that. How did you get the monthly timeline renderer to stretch across the whole month, i can only get it so it will repeat in line with the columns (i hope that makes sense) which means I have the same month many times instead of once like in your example, which is not a good look
in the TimelineViewer class inside flexlib/scheduling/timelineClasses there is a private function called render which sets the position of every timeline item. here I compare the text of the previous item and if its the same it doesn’t get displayed.
basically it depends of the formatter in the MonthlyTimelineItemRenderer and its uniqueness…
Thanks Gus, I’ll give that a go. Thanks again for taking the time to answer me
Any problem, doubt or comment just let me know… I’ll try to answer as fast as a I can…
I’d like to me the component much better
Hi Gus, This is really nice post. can you tell me how to apply scroll on the resource Planning Viewer?? I saw there are function to do so but unable to use them. can you please tell me how can I use it. I am beginner.
Hi Kamlesh,
what do you mean by apply scroll?? could you explain to me what do you want to do??
Hi Gus, its me again
I’ve noticed what i think is a major bug in the timeline viewer, and i’m hoping you can help me… when i scroll to October 25 2009, it appears twice and throws all of the dates off by one day after that. I’ve re downloaded the source from google code and modified the example and can replicate it so its nothing to do with any changes i’ve made to the classes… any idea? have you come across this problem too?
I think its because of British daylight saving. the time would go back by an hour on that day… any idea how to get around this?
Solved it, a change to the dateUtil class is required, changing the clearTime and setTime methods to use hoursUTC. I hope this helps some folks out there
Happy to see that you solve it
if you can please send me the modifications to update the code
send me your email address and i will:-)
Hi gus,
I come to know how to apply horizontal scroll to scheduler viewer.
Can you tell me how I can apply onclick event on entry? so that when user click on the particular entry then one form will come to add “from” and “to” time and then size will get adjusted according to that
Hi,
How can change to have a view with “day, month and year” instead of “hours, day and month”?
Hi Stefano..
it’s pretty simple, in the createChildren of the ResourPlanning component I create the three renderers (hours, day and month). this are simple mxml files in which I format the date… you could create a new one for the year and add it in the create children… if you follow the renderers you could replace them… all the classes are included
Hope this helps
Gus
Hi Gus
thank’s for your replay. I did a YearlyTimeLineItemRenderer with dateformatter:
formatter.formatString = String( “YYYY” );
I added this into createChildren method instead of HourlyTimeLineEntryRenderer. Now i have year, month and day at header.
Thank’s
Best regards
Hi,
How can modify an ‘activities’ the dataprovider ?
I tried with this:
———-code——————
parentGroup.activities = newEntry;
dataProvider.setItemAt(parentGroup,1);
——————————————————
but doesn’t work …….
Hi,
have you tried refreshing the dataProvider? – try dataProvider.refresh() after setting the item
tell me if it worked
For the life of me I cannot figure out how you manged to make the day/month timeline values to not repeat once for every hourly entry. I know I can do this from scratch, but I hate to reinvent the wheel here.
Can you give me a clue? I don’t see it anywhere in your code. I don’t think the flexlib source you provided is complete. When I build SWC and use it in your sample project I get several “undefined” errors.
Looks like this blog is dead, but just in case it isn’t.. ignore my previous entry. For some reason I wasn’t getting the latest library. It’s all there. Thanks!
Happy to see that you solved the problem… it’s true that I’ve haven’t pay much attention to the blog
hehe I’ll try check the messages more often and try to updated some time soon
Hi gus,
I come to know how to apply horizontal scroll to scheduler viewer.
Can you tell me how I can apply onclick event on entry? so that when user click on the particular entry then one form will come to add “from” and “to” time and then size will get adjusted according to that
Hi Amy!
sorry I couldn’t answer you before… In the ResourcePlanning Class there is a listener to the click or change event (scheduleViewer_onSelectionChanged)… this method is called every time a item is clicked, The component (ResourcePlanning) should redispatch this event so you could easily receive the event from outside the component…
Every time I check the code I find more and more room for improvement, and some time just get ashame of the code hehe…
Hope this helps!
Gus
Hi,
Just tried downloading and using the libs but getting
could not find source for class flexlib.scheduling.timelineClasses.MonthlyTimeLineItemRenderer.
Also HourlyTimeLineItemRender.
I removed the entries in the .flexlibProperties and that gets around that.
I then tried to load your example and compile it and get the error
“Type was not found or was not a compile-time constant: GroupedScheduleEntry”
I can’t find a GroupedScheduleEntry class in the lib and also noticed that the import seems to be wrong i.e. import flexlib.scheduling.schedulingClasses.GroupedScheduleEntry.
Is the flexlib izp and source for your example in sync or have I missed something.
Cheers
K
Hi!
MonthlyTimeLineItemRenderer, HourlyTimeLineItemRender and GroupedScheduleEntry are from the zip you download from viewSource… be sure that you copy them to your project… Those classes aren’t from flexlib, I just put them in the same path because logically they should be there.
Ah – oops.
Hi,
We are looking for a good flex scheduler component that has a day and a week view with a fix number of columns like in outlook. Is it possible to achieve this with flexlib scheduler? I tried but it seems flexlib scheduler only works with zoom and dynamic number of columns. And would you be interested in writing such a component as a freelance job?
Best regards
Matthias
Hi Mattias,
I’m currently unavailable to do freelance jobs but I think what you need can be achieved with the flexlib scheduler maybe by setting the start and end date to a week or a day. I’ll see if I can test this and let you know, the only problem I can think is that the layout of the activities is always horizontal which is different than the way outlook handles days activities, vertically…. either way you could try with ely’s calendar which is free with a lot of versions around or the IBM ILOG’s calendar which is paid but very complete with a lot of documentation and support.
Hope this helps
Gus
Hi all,
i m using this component in my application where i want to display the estimated
dates and actual dates of some task completed. so i m trying to make that single row into two and insert two entries with different colors
so can anyone give me some idea about this
Thank u
Hi!
you can check the renderers package in the flexlib project (flexlib.scheduling.scheduleClasses.renderers) where you can find the components used to display the information. You could extend them adding a estimated value and changing the style to differentiate the estimate from the actual date.
This is what I would try first…
HTH
Gus
In this component how can i change Entry/Schedule color change ? & one more thing is this possible to remove Group to static like List view?AdvadnaceddataGrid to Flat.
“AbstractSolidScheduleEntryRenderer” i know this but scheduleClasses are added but there is coming error. I am taking dynamic data from webservices to bins this scheduleviewer please help me on this
Hi…
You can check the Scheduler Samples on the Flexlib page , especifically the sample #3 where they use the ColoredGradientScheduleEntryRenderer for handling the Renderer color change.
About the AdvancedDataGrid I think there shouldn’t be a problem changing it to a DataGrid…
Hope this Helps!
Gus
Hello,
Great Job on this schedule component! It’s exactlly what i want! Exept one thing… How to create new TimeLine renderer that work only with week number (Week 1, week 2…,week n)! I pulling my hair to make this work ! Your help could be nice! Thank!
Hi,
To add a new timeline by the week you need to add a new timelinerenderer (src/flexlib/scheduling/timelineclasses for samples) in which you need to create the date formatter that you require, in this case week 1 etc. Then you just need to modify the ResourcePlanning class to accept the new TimeLineRenderer (you can check the createChildren method to see how they are handled) – Ideally the should be defined by an itemrenderer or something so they be outside the component.
HTH
Gus
I have one question: have you made any modifications to the flexlib.swc library classes? Or you are using them as is, and added the ones you wrote and are visible via view source?
Thank you.
yes, I had to make some modifications in order to handle some events like click and drag over the items pluss some timeline modifications.
I’m getting the following error message when I copied and pasted the code into an adobe air app. It lets me drag an appointment around 3 or 4 times before firing this error message.
ArgumentError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData/ctor()
at flash.display::BitmapData()
at mx.managers::NativeDragManagerImpl/initiateDrag()[C:\autobuild\3.5.0\frameworks\projects\airframework\src\mx\managers\NativeDragManagerImpl.as:355]
at mx.managers::NativeDragManagerImpl/doDrag()[C:\autobuild\3.5.0\frameworks\projects\airframework\src\mx\managers\NativeDragManagerImpl.as:341]
at mx.managers::DragManager$/doDrag()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\managers\DragManager.as:243]
at flexlib.scheduling.scheduleClasses.viewers::EntryViewer/onMouseMoveEntry()
This is pretty weird… and to be honest I don’t have any idea. I will have to run some tests and try to figure out the problem :S Did you implemented anything else or just pasted the sample as is in Air?
I pasted the sample into a canvas of an application. However it seems that the error is only caused by the this appointment.
row = new ArrayCollection();
entry = new SimpleScheduleEntry();
entry.startDate = DateUtil.setTime( new Date(), DateUtil.HOUR_IN_MILLISECONDS * 13 );
entry.endDate = new Date( entry.startDate.getTime() + DateUtil.HOUR_IN_MILLISECONDS * 400 );
entry.label = “Our third entry!”;
row.addItem( entry );
childGroup = new GroupedScheduleEntry(“doc3″,row);
parentGroup = new GroupedScheduleEntry(“or3″,null,[childGroup]);
I commented out the appointment and it works fine. So I’m guessing I may have messed something up in the copy and paste. If I can reproduce it on a different appointment I’ll report it again with more details.
Ok, thanks!! I’m still going to try it at home and see if I can find any posible cause or difference between that appoinment and the others
If you zoom out to ~74.32 in the example you provide there is an area which has a different color and has a horizontal scroll bar visible. In addition, you can not drag and drop appointments over this area of the scheduler. Where would I start looking to fix this problem?
thanks in advance
Thanks for the wonderful job done, how can we have a schedule entry for root element as well , I tried following but it did not work:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var entries:ArrayCollection = new ArrayCollection();
var row:ArrayCollection = new ArrayCollection();
for each (var order:String in orderList){
var orderXML:XML = new XML(orderXMLMap.getValue(order)+"</order>")
row = new ArrayCollection();
var entry : ColoredScheduleEntry= new ColoredScheduleEntry();
entry.startDate = DateUtil.clearTime( DateField.stringToDate("10/10/2011","DD/MM/YYYY"));
entry.endDate = DateUtil.clearTime(DateField.stringToDate("21/10/2011","DD/MM/YYYY"));
entry.backgroundColor = 0x273c0b;
entry.label = orderXML.@name;
row.addItem(entry);
var orderGroup:GroupedScheduleEntry = new GroupedScheduleEntry(orderXML.@name,row);
var orderItemArray:Array = orderItemsMap.getValue(order) as Array;
if (orderItemArray){
var tmpArray:Array = new Array();
for each (var itemName:String in orderItemArray) {
row = new ArrayCollection();
var oItemXML:XML = new XML(orderItemXMLMap.getValue(itemName)+"/>");
var sDate:String = oItemXML.@sDate;
var eDate:String =oItemXML.@rfsDate;
if (sDate==null || sDate.length==0){
sDate= dFormat.format(dateAdd("day",-10,DateField.stringToDate(eDate,"DD/MM/YYYY"))).toString();
}
entry = new ColoredScheduleEntry();
entry.startDate = DateUtil.clearTime( DateField.stringToDate("15/10/2011","DD/MM/YYYY"));
entry.endDate = DateUtil.clearTime(DateField.stringToDate("19/10/2011","DD/MM/YYYY"));
entry.backgroundColor = 0xFEDbbb;
entry.label = oItemXML.@name;
row.addItem(entry);
var orderItem:GroupedScheduleEntry = new GroupedScheduleEntry(oItemXML.@name,row);
tmpArray.push(orderItem);
}
orderGroup.children = tmpArray;
}
entries.addItem(orderGroup);
}
dataprovider = entries;
}
Thanks
Hi Rehan,
It should’ve worked… what happened when you ran that code?