Resource Utilization

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

JavaScript Scheduler

How to Show Utilization Percentage

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

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

dp.events.add(e);

Calculate resource utilization for cells:

dp.beforeCellRenderCaching = false;
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

• http://javascript.daypilot.org/demo/scheduler/resourceutilization.html

How to Show Utilization 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.beforeCellRenderCaching = false;
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.beforeCellRenderCaching = false;
dp.onBeforeCellRender = function(args) {
  var capacity = dp.rows.find(args.cell.resource).data.capacity;
  var utilization = args.cell.utilization("utilization");
  var percentage = utilization / capacity;
  // ...
};

JavaScript Tutorials

The JavaScript Scheduler: Displaying Group Availability tutorial displays utilization of child resources in the parent rows.

The JavaScript Scheduler: Column Summary and Availability Chart tutorials displays a summary of time slot utilization in a special fixed row at the top of the JavaScript Scheduler and a histogram in a fixed row at the bottom.

Angular Scheduler

Angular Tutorials

The Angular Scheduler: Resource Utilization Chart tutorial shows how to display utilization percentage and a histogram in special rows fixed at the top of the Angular Scheduler component.