Skip to content

Home

Jump to bottom
themouette edited this page Sep 14, 2010 · 11 revisions

Fork information

This is a forked repository. Have a look at
robmonie’s jquery-week-calendar wiki
for more information.

Important information

This plugin is still in alpha version.
Once everything will be fixed and performances will be improved, i’ll upgrade the version number (2.0 ?) and package a download.

If you want to contribute, feel free to do so. If you want to discuss this version, new functionalities or your fork, join the google group !

jQuery Week Calendar

This page only documents what’s new in this version, for other config and methods, have look to original page or to dedicated pages:

To have an overview, do not hesitate to check the demos

Newly added options

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.

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:

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)
Clone this wiki locally