Open Source Flex 2 Calendar Component

A regular discussion on Flex forums such as FlexCoders is the availability, or otherwise, of a good Calendar component for Flex 2.

So, it is with great pleasure that I can announce that the Adobe Consulting team in EMEA will be releasing an open source Calendar framework to the community within the coming weeks.

This is a framework the team here have been working on for a while and Alex Uhlmann is putting the finishing touches to.

Below is a screenshot of a simple Calendar built on top of the framework, which uses the default renderers for the calendar entries and timeline.

calendar.gif

Don’t be deceived by the basic look of this example calendar and its surrounding controls – the calendar is built on top of an extremely powerful framework which can be used to build very complicated scheduling components and we’ve spending the majority of our time working on that rather than this example. However, we do plan to ship some better examples with the framework.

Some of the features of the Calendar framework are:

  • Display and manipulate 1000s of calendar entries without losing performance.
  • Define how entries are laid out using the predefined layout manager or by providing your own customized layout manager.
  • Assign custom renderers that can dictate the complete look and feel of your calendar entries.
  • Provide renderers in MXML or ActionScript.
  • “Live” zoom support using zoom API.
  • Use framework effects such as Zoom and Move to make best use of the expressiveness of a Flex RIA in order to achieve the best user experience possible while navigating the component.
  • Efficiently add, remove and update entries at runtime.
  • Assign customized background areas to show office hours, lunch time etc
  • Fully stylable
  • Ability to select calendar entries with visual highlighting
  • Consistent in usage with the Flex Framework, eg. dataProvider driven
  • Broadcasts events to help interaction development
  • Can be used in MXML or Actionscript
  • And more…

To give a glimpse of the API of the calendar, here’s the MXML used to create the above example. However, please note that we are still defining the API, so it may change in the final version.

<scheduling:CalendarViewer
id="calendar"
width="600" height="400"
dataProvider="{ appointments }"
startDate="{ new Date() }"
duration="{ DateUtil.DAY_IN_MILLISECONDS }"
zoom="{ zoom }"
itemRenderer="com.adobe.scheduling.AppointmentEntryRenderer"
itemLayoutManager="com.adobe.calendarClasses.BestFitLayoutManager" />

We’re very excited about this contribution to the Flex community and, in time, look forward to seeing it used within your Flex applications.

Finally, in expectation of the being asked the obvious question, and following in the footsteps of all good delivery teams, the answer is “It’ll be ready when its ready” 😉

57 Responses to Open Source Flex 2 Calendar Component

  1. Ryan Stewart says:

    Bravo guys. This is going to be great, and it will be a huge boon to the community.

  2. Mike says:

    Very nice!

  3. phil says:

    Awesome stuff. well done!

  4. Tariq Ahmed says:

    Ohhhhh Yeaaaaaaaaaaaaaa….. SWEET!

  5. Shigeru says:

    I can’t wait!!

  6. William Cui says:

    That’s really cool!
    I wonder whether the live share and calendar data push is within the scope of design.
    Cannot wait to see it…

  7. Demian says:

    Sweet! Can’t wait to add this to my toolset! Keep up the good work.

  8. Marcel Fahle says:

    Hey, that looks really great. Can’t wait to testdrive it. I’m really interested in your approach of building these multicolored blocks because next week I’ve got a similar task on my desk (graphical display of cuepoint-blocks on a videostream timeline – similar to the adobe premiere interface).
    Especially the combination with the zoom functionality looks brilliant..

  9. Erki Esken says:

    Can we expect this to come with a liberal source license?

  10. John Dowdell says:

    Sounds great to me too, thanks, but what’s the data source format? Can you easily port your calendar data among different interfaces? Or would this be a function of your serverside database, with which the Flex UI speaks exclusively, no integration of arbitrary remote calendar data in “standard” formats possible?
    What’s the data model? Thanks! 🙂

  11. Folks … the details will follow, but the intention of this intiative from Adobe Consulting has always been to build the most generic, reusable, stylable, skinnable, portable calendar component that the community will be free to use in the most unrestrictive manner in your personal and commercial projects. We want you to leverage this component as best and as ingeniously as you can in your own applications – it’s our job to help you build great projects with Flex.
    The team have built this component from the ground-up on the Flex component framework, so it has all the customisation you’d hope for and expect, to drop this seamlessly into your own user-experiences and to use it in as many ways as you can see fit.
    We’re sneaking this because so many of you want to know whether you should embark upon such a build yourself. I can promise you this component *flys* – I was watching Alex render calendars with 10s of 1000s of entries on it, with video-game smooth scrolling around the calendar.
    Hold your breath – I can’t wait to see what you guys are able to do with this component once it’s ready for release !
    The team are working hard on getting this to you as soon as possible, with everything you need to be able to pick it up and drop it into your own applications.
    Best,
    Steven

  12. Manohar Joshi says:

    Steven / Alistair, we need calendar component urgently. Can you provide a beta release atleast ?
    BTW: Laszlo has built this long back.
    http://www.laszlosystems.com/lps/sample-apps/calendar/calendar.lzo?lzt=html

  13. Steve Powell says:

    Any idea of a release date?
    I too am working on a project that could use this component.
    We’ve been trying to get the company to buy into Flex for a while but thus far its been perceived as a solution looking for a problem.
    We can do all the UI for our boring business apps in HTML. However the new Flex Data Services and data sync/record locking features are something I can use to lever open the cashbox as we have to write tons of this stuff in CF at present but the nice presentation bits just don’t make them jump up and down.
    The demo of a replacement appointment scheduling app which’d like to use Flex for (and this component) would however be a different story. I suspect my managers and the bean counters they employ as BA’s would actually see the point this time.
    So looking forward to getting my hands on this one.

  14. bill` says:

    any link or update on this component i cant seem to find any other info about it
    thanks

  15. Brian Radford says:

    Any news on a release date yet? Is there a list we can add our names to so that we can be notified? Or is there a beta testers list?

  16. Kazi says:

    What about a BLOG that runs on FLEX???
    The Calendar looks great!! Cant wait :-(((

  17. Paul says:

    Please sign me up as well… Could really use this now…
    Thanks.

  18. Patrick says:

    This is so very nice, I like the pastel color it likes like the google logo. BTW, doesn’t use flex instead of funky ajax javascript.
    It looks like iCal kinda.

  19. I’d like to just +1 all the calls for this, I’ll need something like this shortly, and was hating the idea of having to write one.
    Can’t wait (even for a beta) !

  20. Max says:

    Can you inform us please of the progress. i can not wait anymore.

  21. Flashmattic says:

    I know everybody asked it, but is the release date is near? if so – how near?

  22. Alex Kenney says:

    Hi there, any idea when this component will be released? I would really love to use it as there is nothing else out there and I’m sure there are loads of people wanting a pre-built calendar component.

  23. Mark Fuqua says:

    I mean no disrespect, but has this project been scrapped? If not, is there a projected date for release? Thanks for all you guys do for the fledgling Flex community.

  24. alessandra says:

    Has it been released or not yet? thanks

  25. Othman Saadi says:

    It seems everybody is waiting for the release. It would be nice if we can have a release date, to know if it makes sense to for wait or not.Thanks.

  26. Annoymous says:

    Somebody please respond, we want to see this. oh and thanks

  27. Michael says:

    within the coming weeks:) they are making fun

  28. cpozen says:

    Just what we are looking for! Please put me on the list as well once it is released…..
    We are willing to beta test along with the other 100 people in this blog.
    Great work!

  29. pablo4d says:

    Very nice stuff! Waiting for release!

  30. Andrew says:

    Um, a few weeks? this was a few months ago 🙁

  31. esans says:

    any link or update on this component i cant seem to find any other info about it
    thanks

  32. Hi, the component is over on Adobe Labs (http://labs.adobe.com) and has been for some months now.
    Alistair

  33. estetik says:

    any link or update on this component i cant seem to find any other info about it

  34. yehhu says:

    i cant wait 🙁 i cant see to find any companent 🙁

  35. nakliyat says:

    Though this topic is one year old i could not find the components told to be here ..Sorry 🙁

  36. sohbet odaları says:

    Can we expect this to come with a liberal source license?

  37. rüya tabirleri says:

    Nice component.

  38. Rafael Ochoa says:

    Hey… I followed the labs link but the code only contains errors looking for TimeLine and DateUtil there is some place that have all de source code?? Great work guys…

  39. TJ Downes says:

    The project is now located on Google Code as part of the flexlib project
    http://code.google.com/p/flexlib/

  40. Nature Sports says:

    Um, a few weeks? this was a few months ago 🙁

  41. mirc says:

    This is so very nice, I like the pastel color it likes like the google logo. BTW, doesn’t use flex instead of funky ajax javascript.

  42. Hey… I followed the labs link but the code only contains errors looking for TimeLine and DateUtil there is some place that have all de source code?? Great work guys…

  43. muhabbet says:

    any link or update on this component i cant seem to find

  44. Bodrum says:

    That’s really cool!
    I wonder whether the live share and calendar data push is within the scope of design.
    Cannot wait to see it…

  45. Q says:

    Where is this calendar component ?
    Q

  46. Nice component. Thanks a lot.

  47. kadin says:

    Um, a few days? this was a few weeks ago 🙁

  48. Steff says:

    Does this go any further? Since Flex 3 is out it’d be nice if chances were made. And what about a real documentation?

  49. mama says:

    Does this go any further? Since Flex 3 is out it’d be nice if chances were made. And what about a real documentation?

  50. sohbet says:

    Hi, the component is over on Adobe Labs (http://labs.adobe.com) and has been for some months now

  51. mırc says:

    Though this topic is one year old i could not find the components told to be here.

  52. kiwi says:

    Below is a screenshot of a simple Calendar built on top of the framework, which uses the default renderers for the calendar entries and timeline. good topic thanx online film izle

  53. film izle says:

    thank you Nice component.

  54. lampforweb says:

    Very useful flex component. Made easy with Flex!