These docs are for an old release.
Info on upgrading to v4
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...
]