Comments (2) Visits (9543)
In IBM ILOG Elixir 3.5, we had the opportunity to re-write the calendar as spark component. The component is compatible with Flex SDK 4.5.x.
The keyword for this component is "flexibility", you will understand why in the next sections.
Here is an non exhaustive list of new or improved features:
First of all, the calendar is a real spark component which means that you can customize any pixel of the component.
At the contrary of the previous version which was a sort of black box, you have access to the internals of the calendar, its sub components, how they are placed, how they are rendered etc.
By accessing the Calendar skins you can:
Here are three different skins applied on the same component instance.
The default skin (click on image to enlarge it)
The spark calendar provides sub components (row header, column header, grid, data groups, layouts etc.) and base classes and building bricks to create your own skins.
Multiple calendar display in column view
In the previous versions, the color of the item renderers was used to differentiate two items that are belonging two different calendar.
In addition to colors, in order to easily compare items from two different calendars, the new component can, for each column representing a day, display a sub column per calendar.
When time is selected in sub columns, you can easily determine the associated calendar, for example to create a task on the selected calendar.
Type of view and time range are not correlated
The calendar's core job is to display events in time through different views. In MX calendar, the kind of view is determined by the duration of the queried time range. This is not the case anymore, now you specifies the time range to display and the display mode: columns or grid.
For example this kind of view were not possible in previous versions:
Time range definition
To set the time range, you can:
Item / renderer association
Before the kind of renderer (vertical, bar, horizontal or label) was hard-coded according to event duration.
Now you can specify the kind of renderer to use for each item using a simple custom function. It is very easy and very powerful.
Here are some examples where the default behavior is overridden:
Here are some screen shots of usage of the renderer kind custom function:
The Calendar components now has the ability to filter out some days of week.
Here are some example of usage of day filtering:
Time of day filtering
Another feature often asked is the ability to choose the first and last hour displayed in the view.
In grid display mode, it only applies on horizontal renderers and not labels.
Only the 8am to 6pm part of the day is displayed: the left side of a cell is 8am and the right side is 6pm.
Minimal sizes supported
If an event is very short is may not be readable. If readability is more important for you than exact time projection on the screen, the layout is now supporting a minimal height or width.
With a minimal height, the event is visible but its end is not correctly projected so the label must include end time.
New grid display mode layout properties
In grid display mode, it is now possible to configure the layout to make the horizontal renderer to fill cells.
The horizontal renderer can now overlap each other like in columns display mode.
The definition of working and non working periods is now delegated to dedicated object.
This work calendar allows to:
As this work calendar is also used in the Gantt chart components (resource chart and task chart), it allows a seamless integration of the calendar component in an application using these two components.
New animation engine
The new architecture allows to create new animations:
The sole transition that is not animated is from one display mode to another.
I think this could be of interest for other customers so I decided to improve the sample I provided on this forum and post it on this blog.
In its initial post Tucsonjhall is mentioning a nice implementation of marching ants selection marquee: http
I added this component to the sample. Another improvement is that the renderer bounds are used instead start/end time to determine if an item is selected, ie. the item renderer must be entirely in the selection rectangle to be selected.
To use the sample, just click in the background of the calendar sheet while maintaining the Ctrl key and drag the selection. The Ctrl modifier is used to keep the time slot based selection, but you can disable it (all
The selected items are displayed in real time.
The source code is available here and you will need the Marc
Of course more improvements can be added like auto-scrolling for example but I think it's already quite nice.
In a previous post I have shown how to read and display ics files. Using this sample, it is possible to read a Google calendar using the ICAL export available in the Calendar settings tab.
In this sample, using these services, the user can:
All these operations are synchronized with the server.
There are many things that could be added in the application like editing calendar properties, handling changes out of the application (HTTP 409), advanced recurring event management, shared calendars etc.
But it should not be too difficult to extend the provided code to implement these features.
On the technical side, as I used AIR, I have access to the PUT and DELETE request methods but it's possible to workaround this limitation using batch requests. I also had to handle redirection (HTTP 302) by hand because the URLLoader object does not seem to resend the HTTP headers on the redirect.
EDIT 03/17/2009: Updated application to show a log view when launched with the "-debug" command line argument.
Edit event properties
The Calendar is a new component introduced in the upcoming ILOG Elixir version 2.0.
I had the question on the forum on how to navigate in a given month using the week representation.
As a matter of fact, if I set a visible time range longer than 7 days on the Calendar, it will automatically go to month mode.
A solution is to synchronize a horizontal scroll bar with the start and end of the visible time range of the Calendar component.
Adding a scroll bar to the Calendar
The synchronization is quite simple:
Here is the result:
Note: for an unknown reason the scroll may be slow. Clicking on the arrow seems solve the issue sometimes. In a pure flex application the issue is not appearing.
Infinite scroll bar
From this sample, it is possible to create a more complex component: an infinite scroll bar.
The infinite scroll bar allows to navigate in time:
Let's now see how it works:
Here is the result.These examples emphasize the fact that the Calendar is a component and thus can be used and customized in various ways.
So, don't stick to the drag & drop from the component palette to the design view and have a look at the user manual and reference documentation!
The goal of this sample is to read an iCal (ics) file, to convert it to an ActionScript model and to display it using the Calendar component available in ILOG Elixir 2.0 beta 1.
This sample has been demonstrated by Christophe Jolif during Adobe MAX US & Adobe MAX Europe.
This application does not support the complete specification but it reads the events of a calendar to be able to display them. Don't come back to me saying that this or this feature is not supported ! ;)
Note that the time zones defined in the ics file are ignored so the dates should be defined in local or UTC time.
This sample takes form of an AIR application. You can drag an iCal file from your file explorer and drop it on this application or add a file using the “Add” button in the right panel.
To install and run the application, you will need the latest AIR runtime available at http
This sample is using the Darkroom skin (by Juan Sanchez), one of the great skins from scalenine.com (not included in the sources, to copy into src/
As Erwan said in a previous blog post, ILOG Elixir 2.0 will ship with a Flex calendar component. It is still in development, but stable enough to start playing with it!
Olympic Games have hundreds of simultaneous events; it's a good candidate to test our future Flex calendar.
Time Zone Chooser
Custom View (3 visible days)
Feedbacks are welcome!