I am starting out with the Daypilot Scheduler and trying to load the resource dynamically, however all I get is rows with header undefined (picture attached). I follow the examples but must be missing something. Below my code and sample of JSON which I have taken from the tutorials.
I tested then JSON and it appears valid.
<div id="dp"></div>
<script>
var dp = new DayPilot.Scheduler("dp");
// behavior and appearance
dp.cellWidth = 40;
dp.eventHeight = 25;
dp.headerHeight = 25;
//dp.treeEnabled = true;
dp.rowHeaderColumns = [
{title: "Staff", width: 80}
];
// view
dp.startDate = new DayPilot.Date().firstDayOfMonth(); // or just dp.startDate = "2013-03-25";
dp.cellGroupBy = "Month";
dp.days = 60
dp.cellDuration = 1440; // one day
dp.cssClassPrefix = "scheduler_8";
dp.onBeforeCellRender = function(args) {
var dayOfWeek = args.cell.start.getDayOfWeek();
if (dayOfWeek === 6 || dayOfWeek === 0) {
args.cell.backColor = "#f8f8f8";
}
};
dp.init();
loadResources();
function loadResources() {
alert("Load Resources");
$.post("/services/test.php?_=" + new Date().getTime(),
function(data) {
dp.resources = data;
dp.update();
});
}
</script>
test.php json is as follows;
[
{"id":"1","name":"Person 1"},
{"id":"2","name":"Person 2"},
{"id":"3","name":"Person 3"},
{"id":"4","name":"Person 4"},
{"id":"5","name":"Tool 1"},
{"id":"6","name":"Tool 2"},
{"id":"7","name":"Tool 3"},
{"id":"8","name":"Tool 4"}
]
I am sure I am missing something basic.
Ben