Skip to content

upgrade from rob's version

themouette edited this page Sep 14, 2010 · 1 revision

Newly added options

This version introduces both free busy management and multi-users display, here is a list of what’s new.

Full documentation are available at those pages:

User management options

  • users: [ array | default: [] ] – the user list. You can specify how to work with users using configuration callbacks. By default this option is an empty array. Warning: it has to be a real Array
  • showAsSeparateUsers: [boolean | default: true] – display users as separate columns. This option has no effect when no user is given.
  • getUserId: [function(user, index, calendar)] – callback used to read user id from a user object. By default, the id is the index in users array
  • getUserName: [function(user, index, calendar)] – callback used to read user name from a user object. The name is displayed in the header.
  • getEventUserId: [function(calEvent, calendar)] – reads the id(s) of user(s) for who the event should be displayed. You can return a single id or an array. By default userId property is used.
  • setEventUserId: [function(userId, calEvent, calendar)] – sets user id(s) to the calEvent and returns calEvent. By default userId property is used.

freeBusy management Options

To pass freebusys to the calendar, just add a freebusys array to your data. a freebusy object is a json object with start and end properties.

  • displayFreeBusys: [boolean | default: false] – should the calendar display freebusys ?
  • getFreeBusyUserId: [function(calFreeBusy, calendar)] – read the id(s) for who the freebusy is available. By default returns userId property.
  • defaultFreeBusy: [Object | default: {free: false}] – the default freebusy object to apply on the calendar. By default the state is managed in the free property, but you can override this behaviour thanks to the freeBusyRender callback.
  • freeBusyRender: [function(freeBusy, $freeBusy, calendar)] – Callbck used to style the freebusy before appending it to the calendar. default behavior is to apply ‘free-busy-busy’ or ‘free-busy-free’ class, depending on freeBusy.free value.
$(document).ready(function() {
  $('#calendar').weekCalendar({
    displayFreeBusys: true,
    events:[...],
    freebusys: [
      {"start":"2009-05-03T00:00:00.000+10:00", "end":"2009-05-03T24:00:00.000+10:00", "free": false},
      {"start":"2009-05-03T08:00:00.000+10:00", "end":"2009-05-03T24:18:00.000+10:00", "free": true}
    ]
  });
});

Other options

  • startOnFirstDayOfWeek: [boolean, function(calendar)] – true means start on first day of week, false means starts on startDate. By default, if daysToShow is 5 or greater, then true, false otherwise.
  • displayOddEven: [boolean | default: false] – should the columns be rendered alternatively using odd/even class
  • textSize: [integer | default: 13] – the text size in pixel for event text.
  • eventHeader: [function(calEvent, calendar)] – returns the event header string.
  • eventBody: [function(calEvent, calendar)] – returns the body string.
  • resize: [function($calendar)] triggered when the calendar is resized
  • changedate: [function($calendar, newDate)] triggered when the date is changed.
  • allowEventCreation: [boolean | default true] – allow event creation or not.

Newly added methods

  • $(”#calendar”).weekCalendar(”serializeEvents”); returns the list of all calEvents displayed in the calendar.
  • $(”#calendar”).weekCalendar(”gotoDate”); Same as gotoWeek, but the new rendering option startOnFirstDayOfWeek needed this to be more consistent.
  • $(”#calendar”).weekCalendar(”getFreeBusyManagersFor”, date, users); convenience method to retrieve FreeBusyManager correponding to the date and user.
  • $(”#calendar”).weekCalendar(”getFreeBusyManagerForEvent”); convenience method to retrieve FreeBusyManager correponding to the given event.
  • $(”#calendar”).weekCalendar(”updateFreeBusy”, freebusys); appends the freebusys to replace the old ones. You can give one or an array of freebusys

raised events

some events are triggered during process, here is the list:

  • resize: [function($calendar)] triggered when the calendar is resized
  • changedate: [function($calendar, newDate)] triggered when the date is changed.

FreeBusyManager and FreeBusy classes

When dealing with freebusys, functions returns FreeBusyManager objects. This is a javascript object implementing convenience methods to retrieve informations.

here is a list of methods you should be aware of:

FreeBusy

A FreeBusy is a time range object managing options. Here is a list of methods available:

  • getStart: returns the start date
  • getEnd: returns the end date
  • getOption(): returns all the options of the object (every property is an option)
  • getOption(key): returns the option with key
  • setOption(key, value): set key option with value
  • isWithin(dateTime): returns a boolean to check if dateTime is within the FreeBusy object (including edges)
  • isValid: returns a boolean, checks if start date is before end

FreeBusyManager

A freeBusyManager is a class inheriting FreeBusy, but managing every freeBusy within the time range.

  • getFreeBusys(): returns every FreeBusy objects in the manager as an array.
  • getFreeBusys(date): returns every FreeBusy objects in the manager containing date as an array. If date is strictly in a Freebusy, then it is the only one to be returned, but if date is on a jucction, both will be returned.
  • getFreeBusys(start, end): returns every FreeBusy objects in the manager that are within start and end. If start or end are at a junction between 2 FreeBusy, then both are include in the return array.
  • insertFreeBusy(freeBusy): Insert freeBusy in the list, and ensure data are still consistent (no hole or overlaps)