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:
- The scroll bar goes from 0 to the number of days in the month minus 7.
- When the scroll bar is scrolled, the new start date of the visible range is computed by adding the scroll position to the first day of the month.
- The end date is obtained by adding 7 days to the start date.
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:
- Initially the scroll bar thumb is centered.
- By dragging it to the left or to right, the calendar starts scrolling day by day respectively backward or forward in time.
- To go faster drag the thumb to left or right end of the scroll bar.
- Stop scrolling by releasing the mouse button or going back to the center of the scroll bar.
Let's now see how it works:
- The scroll goes from 0 to 20 and has a default value to 10. A scroll position lower than 10 means going backward and greater than 10 means going forward.
- When the user starts clicking on the scroll bar, a timer is started.
- This timer delay is set to a very short time interval.
- A listener on this timer is incrementing a counter.
- If the counter reaches a trigger value the calendar visible time range is shifted in a given direction.
- This trigger value is defined by the scroll bar position using a basic formula.
- When the mouse is released, the timer is stopped and the scroll bar position is set to the center position.
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 sources are available here, you will need the ILOG Elixir 2.0 Beta 1 to compile this project.