logo

FullCalendar

requires Scheduler lightning bolt

resourceColumns

Turns the resource area from a plain list of titles into a grid of data.

An array of objects can be provided, each with information about a column:

$('#calendar').fullCalendar({
  resourceColumns: [
    {
      labelText: 'First Name',
      field: 'fname'
    },
    {
      labelText: 'Last Name',
      field: 'lname'
    }
  ]
  resources: [
    {
      id: 'a',
      fname: 'John',
      lname: 'Smith'
    },
    {
      id: 'b',
      fname: 'Jerry',
      lname: 'Garcia'
    }
  ]
});

Each column object can have the following properties:

labelText what goes in the top heading of the column
field the property of the Resource Object where the data will come from. The data is displayed in the cell of the grid.
width the width of the column, either in a number of pixels or a string percentage like `"50%"`
text allows populating the cells programatically with a function
render allows manipulation of the DOM element associated with each cell
group If specified as true, resources will be grouped by this column.

See a simple demo of resourceColumns.

See a demo of resourceColumns with grouping.

The text function will be given the Resource Object and must return text. The render function will be given the Resource Object and the jQuery element associated with the cell. Here is an example that incorporates both techniques:

resourceColumns: [
  {
    labelText: 'My Column',

    text: function(resource) {
      var message = resource.message;
      if (resource.isUrgent) {
        message += '!!!';
      }
      return message;
    },

    render: function(resource, el) {
      if (resource.isUrgent) {
        el.css('background-color', 'red');
      }
    }
  }
  // other columns...
]