David Webster's Blog

Some of you may have noticed a commit I made a couple of weeks ago. This completely replaces the way the Share calendar displays events. On the surface you’ll see minor visual tweaks, but underneath the code is brand new and hopefully they combine to give you a better user experience.

The Process:

One of the great things about working for Alfresco is the iDays we get, where we can go off on a tangent from our everyday work and explore tech that interests us. I’ve been keen to make Share’s calendar more useful, so I recently spent an iDay or two looking at the best way to improve it. I’m not one to reinvent the wheel and one of the biggest issues we’ve had is the logic to render events correctly in all the different views, so I was looking for a solution that would solve that problem for us. It wasn’t long before I settled on Adam Shaw’s excellent FullCalendar as the best of the breed – it manages the rendering in a robust way, does a sane job of exposing extension points and is written in a style that makes sense to me (important for on going maintenance).

A couple of weeks later, Share had a new calendar. Integration was fairly straight forward: mapping our event object, binding callback events and styling. I needed to make a couple of tweaks to the FullCalendar source code to increase our styling ability (adding classes so that all-day and multi-day timed events could be styled differently from single day timed events) and to enable it to fit our REST API (which requires dates in a slightly different format). With FullCalendar being open source, I’m hoping to get these enhancements pushed back into their source code so that other users can benefit from them.

Toolbar Tweaks:

Although there wasn’t much scope for modifying the overall look and feel of the calendar (this upgrade was mainly about improving the reliability of the existing calendar), Linton (our UX guru) and I did take the opportunity to improve the toolbar a little based on the results of a small UX testing session. This included reordering the buttons so that the add event one is more prominent, grouping the navigation elements and adding a Work hours toggle button to enable people to see their events in the Day and Week views without having to scroll past lots of blank time (1am – 6am isn’t a very common time for events, so why show it first?).

Event Info Dialogue:

The popup dialogue box where you view or add event information was a constant source of bugs, so I’ve refactored it as part of this upgrade and hopefully now it’ll work as expected in a lot more situations.

Config Options:

The best part of the calendar replacement for Share admins will be the new configuration options you’ve got (default in brackets):

In view.get.config.xml:

• truncateLength (100): Number of characters used to truncate event description in the Agenda view
• weekView (“agendaWeek”): Used to specify which FullCalendar view to use for Week View, currently only “agendaWeek” is supported.
• dayView (“agendaDay”): The name of the FullCalendar view to use for the day view. Currently only “agendaDay” is supported.
• monthView (“month”):  The name of the FullCalendar view to use for the month view. Currently only “month” is supported.
• weekMode (“variable”): Controls how the weeks will be rendered in a month view, maps to FullCalendar’s weekView option.
• weekends (true): This shows Saturday and Sunday in Day, Week and Month views. Set to false to hide these days.
• allDaySlot (true): Show the all day area at the top of day and week views. If set to false, then All day events will not be shown in those views.
• firstDay (1): Which day does the week start on? 0 = Sunday, 1 = Monday etc. Affects Day, Week and Month view. (see also: calendar.widget_config.start_weekday i18n message string in slingshot.properties for setting the YUI mini/popup calendar)
• minTimeWorkHours (7): The first hour displayed by default when in Day or Week views
• maxTimeWorkHours (19): The last hour displayed by default when in Day and Week views
• minTimeToggle (0): The first hour displayed when Working Hours display is off in Day and Week views.
• maxTimeToggle (24): The last hour displayed when Working Hours display is off in Day and Week views.
• aspectRatio (1.5): Controls the width:height ratio of the grid in Month views.
• slotMinutes (30): Number of minutes between each line on the Day and Week views.
• disableDragging (false): Should modifying events by dragging them be prevented?
• disableResizing (false): Should modifying events by resizing them be prevented?

In create-event.get.config.xml

• enableDocFolder (false): Should the “DocFolder” browser be included on the event creation page? This is mainly used for integration with Microsoft’s Meeting Workspaces.
• defaultStart (12:00): Default time for a timed event to start.
• defaultEnd (13:00): Default time for a timed event to end.

Future plans:

Now that this upgrade has been made, I’m hoping that in future versions we’ll be able to add new features and functionality to make the calendar even more useable. Ideas we currently have are: proper time zone support (currently events are stored with a fixed GMT offset, which mostly works except around DST), recurring event support (events created externally should be displayed correctly, but we don’t currently support creating recurring events), a user calendar (combining events from all sites and other sources) and the ability to input event times without having to use a 24hour clock.

Will the new calendar make a difference to your use of share? Is there anything else you would like to see included in future development work? Let me know in the comments.

Tags: Alfresco, calendar, config, fullcalendar, iDay, share

This entry was posted on Monday, September 26th, 2011 at 2:52 pm and is filed under Calendar, Share. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.