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 = resource.extendedProps;
      var message = extendedProps.message;

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

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