Share Calendar Updates

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?).

Image of the toolbar

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: , , , , ,

20 Responses to “Share Calendar Updates”

  1. Will Abson Says:

    Great post, I think a lot of the work that has gone into the new component isn’t visible on the surface, so this really helps to explain what the changes are and why they’re so important.

    Unless I’m mistaken, this is the first use of JQuery inside of Share, so on the development side I’d also be interested in how you found this compared with YUI, and how you integrated it into the standard Share client-side framework.

  2. Fran Says:

    Thank you for those improvements! We, the people who have Monday as first day of the week, thank you a lot. :-)

    Will it be available on Alfresco 4.a Community? If not, when can we expect enjoying it?

    One suggestion: read/write CalDAV access.

    Good job and thank you again!!

  3. David Webster Says:

    @fran – thanks for the feedback. I think it should have made the community release, but when I find out for sure, I’ll let you know.

  4. David Webster Says:

    @Will, yes this is the first jQuery usage in Share. I’ve been using jQuery for a while on other projects so am used to its coding style already – the rest of the UI team agree that it does some things better than YUI (e.g. DOM manipulation), so I don’t think this’ll be the last time we use it (especially now it’s already included in Share). Integrating it was fairly straight forward – I’ve just stuck to the standard YUI framework for most things (to maintain consistency with the rest of Share) and then just dropped into jQuery to initialise the calendar. I’d say the biggest gotcha when working with jQuery is the overriding of ‘this’ within functions executed by jQuery, but that’s easy to work with (and make sense in lots of cases) once you expect it.

  5. Thomas Hartmann Says:

    Thank you for the improvements! Good job so far, it looks really nice.
    But what’s really missing is CalDAV read and write access.

  6. Toni de la Fuente Says:

    Hi David, great news!
    With previous version of Share Calendar we can export each calendar as “iCal feed” to an Apple ical or other ical supported applications. Now with changes you have mentioned, can we do that? Is or is going to be supported capabilities to import/subscribe from remote calendars like Exchange, Zimbra, caldav,etc? and is going to be possible to combine some remote calendars in same site calendar?

    Thanks in advance.

  7. David Webster Says:

    @toni – the iCal feed is still there, that hasn’t changed. Adding additional Calendars into the site calendar isn’t something we support yet, but FullCalendar has pretty good support for loading events from multiple sources, so it might well be something we support in the future. The ability to subscribe to a site calendar from an external calendar application (CalDav, Exchange, etc.) is a popular request (just see the comments on this blog!), so I imagine we’ll look at adding that in a future version.

  8. Toni de la Fuente Says:

    Thanks David!

  9. David Webster Says:

    I’ve just found out that these changes will be in the 4.0a community release that is being finalised at the moment. :-)

  10. Douglas C. R. Paes Says:

    What about sending email to scheduled events?

  11. David Webster Says:

    There aren’t currently any plans that I’m aware of to enable people to add events via email, sorry.

  12. David Webster's Blog » Blog Archive » Aloha Editor Extension Demo Says:

    [...] made other notes of the day. Yes, it was another iDay, and another tool based on jQuery (just like FullCalendar and [...]

  13. Patrick Says:

    Thank you for detailing what work you have done with the Calendar, I have been working with my team on rolling out Community 4.0b and have found that people really would like to use the calendar more. One of the major things they request is to be able to make repeating meetings. One of the things I feel would be helpful would be the ability to subscribe to a calendar from various clients (CalDAV or Exchange). Thank you for your work and thank god for iDays. I will be interested to see what things can be added from the FullCalendar product.

  14. Patrick Says:

    I should have wait to comment. How difficult would it be to implement some of this in the current calendar?

    http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

  15. David Webster Says:

    Hi Patrick, thanks for your comments. It should* actually be fairly straight forward to add (read-only) event sources to your calendar, using the addEventSources fullCalendar method. If you create an extension that runs some javascript after the calendar has rendered, you’ll be able to call something along the lines of:

    $(Alfresco.util.ComponentManager.findFirst(“Alfresco.CalendarView”).container).find(“.fc”).fullCalendar(“addEventSource”, source)

    See the FullCalendar documentation here: http://arshaw.com/fullcalendar/docs/event_data/addEventSource/

    *I’ve not actually tried it, so let me know how it goes.

  16. Jerry Says:

    Hi David

    Is there any plan to support multiple calendars in a Share site? For e.g – Vacation calendar, On-Call calendar etc

    Thanks
    Jerry

  17. David Webster Says:

    Hi Jerry,

    That’s not an item I’ve seen on the backlog. I the idea of adding a user calendar (which collates the calendars of all the sites that the user is a member of) has been discussed, but not one for making multiple calendars in the same site.

    An alternative approach, that is currently supported in 4.0.x (and was also in 3.4) is tagging events. If you added the tag “vacation” or “on-call” to the appropriate events, you’re then able to use the filter on the left hand side and show only those events.

    There are plans to give the add event dialogue on overhaul (perhaps for 4.1) and this is likely to include the ability to specify colours for events, so hopefully in the next version, you’ll also be able to distinguish event types by their colour.

  18. mim Says:

    Hi David
    I have a question but its not related to this post. :)
    I want to localized calendar es. date picker calendar used in share. but unfortunately i cant find which javascript files do that. I searched inside of {path-to-alfresco}\tomcat\webapps\share for calendar files but results were hopeless

    tomcat\webapps\share\components\calendar
    tomcat\webapps\share\yui\calendar
    tomcat\webapps\share\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\calendar

    I renamed this folders and stop/start server but I can access datepicker in Start Workflow :)

  19. David Webster Says:

    Hello – you’re probably best off posting unrelated questions to the forums at https://forums.alfresco.com/en/

    However: the date picker is based on the YUI widget, as you’ve identified, and the l10n settings are set for all the pickers across Share in the Alfresco.util.calI18nParams method from alfresco.js – you’re probably best to override that method if you want to make custom changes to all the pickers. If you want any more info, post a topic on the forums & that will enable more people to help as well as making your question (and answers) easily searchable in future so others can learn from it as well.

  20. mim Says:

    Thanks a lot
    I see that method but I still have some problems.
    As you said I post a new thread in Alfresco forum and I will be so appreciate if you look at it:

Leave a Reply


Alfresco Home | Legal | Privacy | Accessibility | Site Map | RSS  RSS

© 2012 Alfresco Software, Inc. All Rights Reserved.