These docs are for an old release.
Info on upgrading to v5
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: [
{
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 HTML element associated with the cell. Here is an example that incorporates both techniques:
resourceColumns: [
{
labelText: 'My Column',
text: function(resource) {
var extendedProps = resource.extendedProps;
var message = extendedProps.message;
if (extendedProps.isUrgent) {
message += '!!!';
}
return message;
},
render: function(resource, el) {
var extendedProps = resource.extendedProps;
if (extendedProps.isUrgent) {
el.style.backgroundColor = 'red';
}
}
}
// other columns...
]