html5-scheduler-resource-utilization.png

You can specify resource consumption for each event and calculate the total utilization for each cell.

JavaScript

Example: Using Percentage

You can specify the capacity used by an event as a percentage of the total:

var e = new DayPilot.Event({
  start: "2014-03-25T00:00:00",
  end: "2014-03-26T12:00:00",
  id: "1002",
  resource: "A",
  percentage: 10,
  text: "Utilization: 10%"
});

dp.events.add(e);

Calculate resource utilization for cells:

dp.onBeforeCellRender = function(args) {
  var utilization = args.cell.utilization("percentage");
  var visible = utilization > 0;

  if (visible) {
      var opacity = utilization / 100;
      args.cell.html = "<div style='position: absolute; left: 0px; top:0px; right: 0px; height: 15px; padding-left: 3px; background-color: red; color:white; opacity: " + opacity + ";'>" + utilization + "%</div>";
  }
};

Demo

Example: Using Custom Units

You can use custom units for the utilization field. This example assumes the capacity of each resources is 10 units. The capacity used by each event is specified in custom units instead of percentage:

dp.events.list = [ {  utilization: 1, ... } ...];
dp.onBeforeCellRender = function(args) {
  var capacity = 10;
  var utilization = args.cell.utilization("utilization");
  var percentage = utilization / capacity;
  // ...
};

You can also specify the capacity for each resource using a custom field in "resources" array:

dp.resources = [ { capacity: 6, id: .... } ... ];
dp.events.list = [ {  utilization: 1, ... } ...];
dp.onBeforeCellRender = function(args) {
  var capacity = dp.rows.find(args.cell.resource).data.capacity;
  var utilization = args.cell.utilization("utilization");
  var percentage = utilization / capacity;
  // ...
};

See Also