Update – this Drag and Drop post covers some other aspects of this plug-in.

FullCalendar is a JavaScript calendar JQuery plug-in. I’ve used it now on 2 projects and it’s just great.

So on another project, we needed to be able to see the calendar agenda day view with it split into vertical columns for each ‘resource’. There are a few forks that are doing this with FullCalendar but they aren’t really suitable for us. One has resource rows rather than columns and the other is a fork of an old version of the FullCalendar code.

So I went ahead and forked the source on github. The goal was to keep the forked version as similar to the core as possible – that way upstream merging should be easier.

Demo

Here is a working demo of the plugin with resources.

Code

The source code of it is here. Get the V2 js and css from here – https://github.com/seankenny/fullcalendar/tree/v2/dist.

Usage

The only difference to the consumer of the plugin is that there is a new option (‘resources’) and there is a new property on the eventObject named resources that we use to tie back to the relevant resource using the id.

The resources option can contain either the resources objets or a url that will return a JSON array.

1
2
3
4
5
6
7
8
9
10
11
12

$('#calendar').fullCalendar({
  defaultView: 'resourceDay',
  resources: [{'id':'r1','name':'Resource 1'},{'id':'r2', 'name':'Resource 2'}],
  //resources: 'https://data-url'  //you can use just a url to your resources data if you want 
  events: [
  {
    title: 'R1-R2: Lunch 14.00-15.00',
    start: '2013-08-21T14:00:00.000Z',
    end: '2013-08-21T15:00:00.000Z',
    resources: ['r1','r2']
  }
});

The event.resources property can take any of the following formats:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

events: [
{
  resources: 'r1'  // to assign this event to the r1 resource
}
// OR
events: [
{
  resources: ['r1']  // to assign this event to the r1 resource
}
// OR
events: [
{
  resources: ['r1','r2']  // to assign this event to the r1 & r2 resources
}

The resources option on the calendar object also accepts a className to allow the styling of the individual resource columns:

1
2

$('#calendar').fullCalendar({
  resources: [{'id':'r1', 'name':'Resource 1', 'className' : ['my-class-name']}]

Enjoy!