resourceAreaColumns

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:

var calendar = new Calendar(calendarEl, {
  resourceAreaColumns: [
    {
      field: 'fname',
      headerContent: 'First Name'
    },
    {
      field: 'lname',
      headerContent: 'Last Name'
    }
  ]
  resources: [
    {
      id: 'a',
      fname: 'John',
      lname: 'Smith'
    },
    {
      id: 'b',
      fname: 'Jerry',
      lname: 'Garcia'
    }
  ]
});

Each column object can have the following properties:

field	the property of the Resource Object where the data will come from. The data is displayed in the cell of the grid.
group	If specified as `true`, resources will be grouped by this column.
width	the width of the column, either in a number of pixels or a string percentage like `"50%"`
headerClassNames	a ClassName Input for the `<th>` at the top
headerContent	a Content Injection Input for the `<th>` at the top
headerDidMount	called right after the `<th>` was added to the DOM
headerWillUnmount	called right before the `<th>` will be removed from the DOM
cellClassNames	a ClassName Input for the `<td>` in the body
cellContent	a Content Injection Input for the `<td>` in the body
cellDidMount	called right after the `<td>` was added to the DOM
cellWillUnmount	called right before the `<td>` will be removed from the DOM

See a simple demo of resourceAreaColumns.

See a demo of resourceAreaColumns with grouping.

Here is an example that incorporates cellClassNames and cellContent:

resourceAreaColumns: [
  {
    headerContent: 'My Column',

    cellClassNames: function(arg) {
      var extendedProps = arg.resource.extendedProps;

      if (extendedProps.isUrgent) {
        return [ 'urgent-resource' ]
      }
    },

    cellContent: function(arg) {
      var extendedProps = arg.resource.extendedProps;
      var message = extendedProps.message;

      if (extendedProps.isUrgent) {
        message += '!!!';
      }

      return message;
    }
  }
  // other columns...
]

Timeline-specific Options

See Also

resourceAreaColumns