How to show total events duration in each resource header ?

This article explains how to show the total events duration in each resource header.

Step 1: Create a JS Scheduler with a resource header template option by referring to the below link.

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/resource-grouping.html

Step 2: Define the template with the corresponding functions to display the resource name with event's duration, as shown in the following code example.

<script id="restemplate" type="text/x-template">
    <div class='template-wrap'>
        <div class="airline-details">
            <div class="airline-name">${getAirlineName(data)}</div>
            <div id="${getAirlineTime(data)}" style="padding-top: 6px;"> </div>
        </div>
    </div>
</script>
 
window.getAirlineName = function (value) {
  return (value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName;
};
 
window.getAirlineTime = function (data) {
  let value = JSON.parse(JSON.stringify(data));
  return value.resourceData.AirlineId;
};

Step 3: Define the eventRendered and dataBinding events to calculate and display each resource events duration, as shown in the following code example.

eventRendered: function (args) {
    let totalEvents = this.eventsData;
    var dm = new ej.data.DataManager({ json: totalEvents });
    let resources = this.resources[0].dataSource;
    resources.forEach(function (resource) {
      var hours = 0;
      var datasource = dm.executeLocal(
        new ej.data.Query().where("AirlineId", "equal", resource.AirlineId)
      );
      debugger
      datasource.forEach(function (data) {
        hours += Math.abs(data.EndTime - data.StartTime) / 36e5;
      });
      document.getElementById(resource.AirlineId).innerHTML = hours + " Hours";
    });
  },
 
  dataBinding: function (args) {
    if (args.result.length == 0) {
      let resources = this.resources[0].dataSource;
      resources.forEach(function (resource) {
        document.getElementById(resource.AirlineId).innerHTML = 0 + " Hours";
      });
    }
  }

Step 4: Run the sample, and the event's duration will be displayed on the resource header as shown below.

o/p image