New CalendarFX View: MonthGridView!

Me and my team have recently begun work on a new view for CalendarFX with the initial goal to display a whole year in vertical columns. The name of the view is MonthGridView. As usual the goal has changed slightly while coding. The view is now capable of displaying any number of months with extra months added in front or in the back. Now, for example, the developer can choose to display six months (a semester) with one month “padding” in front and one month in the back.

The following screenshot shows an entire year with no padding.

In planning and scheduling applications it is often the case that the person using the software wants to quickly compare the same weekdays with each other (e.g. “see resource utilisation on Mondays”). To make this easier the new view also supports a layout option where the same weekdays are aligned. It looks like this:

As mentioned above, the view can display any number of months with any number of “padding” months. The screenshot below shows a six month period with one month padding on each side (the styling of the extra months still needs some work :-))

The screenshots do not show any calendar information, yet. This part is still work in progress.

If you have any suggestions for features that you would like to see in this view then please leave a comment.

 

Advertisement

CalendarFX In Action: SkedPal!

If you are interested you can now see CalendarFX live in action. As of version 1.7 the AI scheduling software SkedPal has replaced their Swing-based calendar (MigCalendar) with CalendarFX 1.3 for JavaFX 8. The result is a much more consistent look and feel and user experience.

SkedPal 1.7 with CalendarFX 1.3 – Day View

Week View

Month View

CalendarFX at ComponentSource

I am very happy to say that CalendarFX is now also available for licensing via ComponentSource, a global vendor for software components. They have also been distributing FlexGantt for Swing and FlexGanttFX for JavaFX for some time now.

CalendarFX page at ComponentSource

CalendarFX Released

Finally! After one and a half years of on and off development work on CalendarFX I finally managed to wrap it up today and to make it available for download and licensing.

If you want to take it for a spin simply visit http://www.calendarfx.com and download the distribution. The download is feature complete and only requires a license key after the trial period of several months.

To start coding I suggest that you take a look at the online developer manual. It is currently quite “compressed” but will be extended over time. Ideally developers tell me which aspects of the framework require further explanation.

The API documentation can also be found online. It contains very detailed descriptions of each custom control and quite a few screenshots.

Speaking of screenshots: below you can see the four main “pages” shown by the CalendarView control. This is a very high level and complex control that already supports the most common use cases for a calendar UI.

CalendarFX requires JavaFX 8u45+.

Day View

Week View

Month View

Year View

JavaFX Tip 21: Animate!

When developers try to sell the switch from Swing to JavaFX to their superiors they often say that the user interfaces will look better and more modern. However, to really deliver on this promise I believe that one can not just rely on the improved look and feel of the built-in controls of JavaFX but that some extra effort has to be made to make the UI really stand out and to make everyone say “yeah, this is really an improvement”.

One of the things that can be done to spice up the UI is to animate some of its elements, e.g. fade in / out, slide in / out.

In CalendarFX one of the places where I use animation is the red horizontal line that marks the current time.

This line is only shown when the user is looking at the current day (“today”). So the line’s visibility has to be toggled, depending on the current date. When this happens the line does not just appear or disappear but it fades in or out. The following video shows this feature in action:

(For some reason the “red” line shows up in “black” in this quicktime screen capture, but the important thing can still be seen.)

The line softly appears or disappears with a very subtle fade-in / fade-out animation. This kind of animation is very well supported by JavaFX via its observable properties and the FadeTransition. CalendarFX manages the visibility of the line in a property called showCurrentTimeMarker. When this value changes the method updateTimeMarkerVisibility will be called.

	view.showCurrentTimeMarkerProperty()
                  .addListener(it -> updateTimeMarkerVisibility());

The update method first determines the current opacity of the time marker (1 if visible, 0 if not visible) and then uses the fade transition to change the start value to the new end value.

private Line currentTimMarker;
private Circle currentTimeCircle;

private void updateTimeMarkerVisibility() {
	double lineOpacity =
           getSkinnable().isShowCurrentTimeMarker() ? 1 : 0;
	FadeTransition lineTransition =
           new FadeTransition(Duration.millis(600),
                                   currentTimeMarker);
	lineTransition.setToValue(lineOpacity);
	lineTransition.play();

	double circleOpacity =
           getSkinnable().isShowCurrentTimeTodayMarker() ? 1 : 0;
	FadeTransition circleTransition =
           new FadeTransition(Duration.millis(600),
                                   currentTimeCircle);
	circleTransition.setToValue(circleOpacity);
	circleTransition.play();
}

This is really all it takes to add some spice to your user interface but it will help you to make the little difference that will make people enjoy working with your application (and they will not even know why).