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:
var calendar = new Calendar(calendarEl, {
resourceColumns: [
{
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%"` |
| headerClass | a ClassName Input for the |
| headerContent | a Content Injection Input for the |
| headerDidMount | called right after the |
| headerWillUnmount | called right before the |
| cellClass | a ClassName Input for the |
| cellContent | a Content Injection Input for the |
| cellDidMount | called right after the |
| cellWillUnmount | called right before the |
See a simple demo of resourceColumns.
See a demo of resourceColumns with grouping.
Here is an example that incorporates cellClass and cellContent:
resourceColumns: [
{
headerContent: 'My Column',
cellClass: 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...
]