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)

Scheduler component Sample

Scheduler component Sample

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 :)

You can follow any responses to this entry through the RSS 2.0 feed.

Comments

  1. On July 15, 2009 Marcelo Yanez says:

    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

  2. On July 15, 2009 gshock says:

    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

  3. On July 17, 2009 juan says:

    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?

  4. On July 17, 2009 Gus says:

    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 :)

  5. On July 18, 2009 juan says:

    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.

  6. On August 06, 2009 Sdanektir says:

    It is the coolest site, keep so!

  7. On August 12, 2009 Terry says:

    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.

  8. On August 12, 2009 Gus says:

    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

  9. On August 26, 2009 Andy says:

    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

  10. On August 26, 2009 Gus says:

    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

  11. On August 26, 2009 Andy says:

    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 :-(

  12. On August 26, 2009 Gus says:

    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…

  13. On August 26, 2009 Andy says:

    Thanks Gus, I’ll give that a go. Thanks again for taking the time to answer me :-)

  14. On August 26, 2009 Gus says:

    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 :)

  15. On September 14, 2009 Kamlesh says:

    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.

  16. On September 16, 2009 Gus says:

    Hi Kamlesh,

    what do you mean by apply scroll?? could you explain to me what do you want to do??

  17. On September 16, 2009 Andy says:

    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?

  18. On September 16, 2009 Andy says:

    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?

  19. On September 16, 2009 Andy says:

    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 :-)

  20. On September 16, 2009 Gus says:

    Happy to see that you solve it :D if you can please send me the modifications to update the code :)

  21. On September 16, 2009 Andy says:

    send me your email address and i will:-)

  22. On September 18, 2009 Kamlesh says:

    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

  23. On January 29, 2010 Stefano says:

    Hi,
    How can change to have a view with “day, month and year” instead of “hours, day and month”?

  24. On January 30, 2010 Gus says:

    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

  25. On February 01, 2010 Stefano says:

    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

  26. On February 03, 2010 Gianluca says:

    Hi,
    How can modify an ‘activities’ the dataprovider ?

    I tried with this:
    ———-code——————
    parentGroup.activities = newEntry;
    dataProvider.setItemAt(parentGroup,1);
    ——————————————————

    but doesn’t work …….

  27. On February 08, 2010 Gus says:

    Hi,

    have you tried refreshing the dataProvider? – try dataProvider.refresh() after setting the item

    tell me if it worked

  28. On April 01, 2010 Erci says:

    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.

  29. On April 05, 2010 Erci says:

    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!

  30. On April 17, 2010 Gus says:

    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 ;)

  31. On April 23, 2010 Amy says:

    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

  32. On May 16, 2010 Gus says:

    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

  33. On May 20, 2010 keith says:

    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

  34. On May 20, 2010 Gus says:

    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.

  35. On May 21, 2010 keith says:

    Ah – oops.

  36. On July 02, 2010 Matthias says:

    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

  37. On July 06, 2010 Gus says:

    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

  38. On July 31, 2010 flexie says:

    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

  39. On August 02, 2010 Gus says:

    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

  40. On December 10, 2010 ramchandra.pujari says:

    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

  41. On January 03, 2011 Teckel says:

    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!

  42. On January 17, 2011 Gus says:

    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

  43. On February 04, 2011 Adrian says:

    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.

  44. On February 04, 2011 Gus says:

    yes, I had to make some modifications in order to handle some events like click and drag over the items pluss some timeline modifications.

  45. On March 14, 2011 Rich says:

    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()

  46. On March 14, 2011 Gus says:

    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?

  47. On March 14, 2011 Rich says:

    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.

  48. On March 15, 2011 Gus says:

    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

  49. On March 15, 2011 Rich says:

    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

  50. On October 24, 2011 RehanAzher says:

    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:

    1
    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
    private function testFunction():ArrayCollection{
        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

  51. On October 25, 2011 Gus says:

    Hi Rehan,

    It should’ve worked… what happened when you ran that code?

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>