One of the many exciting additions to the Dashboard Framework in 3.1 is the addition of the Calendar component. As opposed to selling the Calendar component as a standalone component, we are including it with the Flexicious Dashboard Framework, so if you already own a license for our Dashboard Framework with a valid subscription, you are entitled to a license for our Calendar as well!

Here is a screenshot for some developer eye-candy.

Why did we write the Calendar component?

Starting with the DataGrid, and then the Dashboard, Charts, Gauges, and smaller controls like MultiSelect, DateComboBox, Date Time Picker, and numerous other extended components, our goal has been to make your application development as efficient as possible.  We take the most common use cases from our experience with library development and consulting, and package them up into reusable components that accelerate your development and save you time and money.  Calendar is another step in that direction.

From a technical standpoint, there are no good calendar components designed specifically for the Spark Framework with mobile support and skinning built in.  Some other calendar components have stopped being actively developed and are not being upgraded with new functionality or being updated for use with newer versions of Flex.   If you look at some of the screenshots, and review the sample code, you will be amazed at how easily and how efficiently you can skin the Flexicious Calendar component.  

Finally, we use a lot of our components (including this calendar component) for our consulting services division, and our consulting services customers have some of the most complex UI requirements (that’s why they come to us!). By authoring our own components, we’re able to bend it like Beckham!!

To see what is possible with the excellent skinning architecture that the calendar is based on, below is the same calendar component switched from an Office 2013 theme (default) to iOS 7 theme:


Introduction:

The Flexicious Calendar is a skinnable component built on the excellent Spark Architecture, to display an outlook-like Calendar UI. Out of the box, It supports

  • Month View
  • Week View
  • Work Week View
  • Day View

 

The core class that you would drop on your screen is the com.flexicious.components.calendar.Calendar.  The default skin class for this component is the com.flexicious.components.calendar.CalendarSkin class.  If you look at this class, you will find the declarations of the composited Month View and Week View.  The same Week View instance is used for Work Week as well as Day View.  The week view is nothing but an extended Spark DataGrid, with specialized renderers to render the time slot cells as well as the weekday header cell.  The most important piece of the WeekView is the ability to render calendar items on top of the cells.  The calendar items are rendered using the com.flexicious.components.calendar.CalendarItemRenderer class. If you need to customize this, you can do so via setting the calendarItemRenderer property on the Calendar component. Please make sure you extend from the CalendarItemRenderer class should you need to customize this.

 

The data provider for the calendar simply consists of an array of objects. You define the data provider by setting the calendarItems property on the calendar control.  If you make any changes to the calendar items, you can trigger a refresh of the calendar by calling the invalidateCalendarItems method.  The same calendar items array is used as a data provider for all views of the calendar.   There needs to be no special interface implemented for this object.  Although, it would have been elegant to provide such an interface as a requirement, we made the decision not to because a number of our customers simply get json data from the backend and this would have required additional steps to be able to render JSON data on the calendar component.  The only requirement for such a VO is that is have a startDate, endDate, a title (that matches the labelField of the Calendar Component), and an optional description that matches the descriptionField of the calendar component.

 

There are two main types of events that are dispatched from the calendar component.  The first is the interaction with individual date ranges.  This happens when the user interacts with a day on the calendar month view, or on a hour section on the week/day views.  These interactions do not occur in context of an individual calendar item, but on a date range.  The event has a dateRange property that tells you the details about the date range that was clicked on. These are the dateRangeClick and dateRangeDoubleClick events.

The other events occur specifically in relation to individual calendar items.  These are the calendarITemClick and calendarItemDoubleClick events.  These happen when the user interacts with the calendarItemRenderers on the screen.  The event has a pointer to the calendarItemRenderer which internally has a pointer to the calendarItem being rendered.

The default response to a double click on a date range is showing a popup to add new calendar items, and the default response to a double click on a calendar item is to show a popup to edit that calendar item.  On the touch version, the same behavior is applied to a double tap. If you wish you can prevent the default on the double click event, and wire up your own response.  Also, if you simply want to provide a custom popup, you can just define a calendarItemPopupRenderer factory and that will be used instead of the built in popup.  The only requirement for such a popup is that it have a calendarItem public property with an object data type. Also, when a new item is created, the calendarItemVOFactory is used to generate a new instance.  If you have a custom VO, you can provide a factory with that VO to this property, and that will be used.  The only requirement for such a VO is that is have a startDate, endDate, a title (that matches the labelField of the Calendar Component), and an optional description that matches the descriptionField of the calendar component.

The final piece we are going to cover in this blog post is the drag and drop support in the calendar component. There are three types of drag and drop operations that we support.

1)      Drag Resize:  On the Week, Work Week, and Day Views, you can drag the edges of the CalendarItemRenderer to extend the start and end dates of the Calendar Item

2)      Drag Drop :   On the Month, Work Week, Week and Day Views, you can drag and drop individual calendar items and drop them on other date ranges to change both the start and end dates.

3)      Drag Drop from other components:  The Calendar supports a dropEnabled property that lets you drop items on to the Calendar. By default, on drop, the calendar uses the calendarItemVOFactory to instantiate a new calendar item, picks up the location where the item was dropped to figure out the start and end dates, and then uses the labelField and descriptionField properties, if they exists on the source and the target objects to populate those properties and set them.

 

Other than that, since the Calendar and the constituent parts are all based on the Spark Skinning paradigm, it is extremely straightforward and efficient to customize the appearance as well as the behavior of the components. We provide an Outlook 2013, which is the default theme as well as a custom iOS7 (Apple iCal) like theme as an example of customizing the appearance completely.

 

We are open to feedback, since this is the initial release of the component, we have additional features planned.  We are keen to hear your feedback to further enhance the component to meet your requirements and save you time!