how we get multiple section_ids by day or week or month change in dhtmlxscheduler

Question

i'm displaying driver's schedule. Some drivers are on holidays so we display red box for them. And other drivers those are active so we display white block for them. I want to count active and non active driver by the calendar day changes. Hope you will understand my question.enter code here

scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom="Section";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;

//===============
//Configuration
//===============
var sections=[
  {key:1, label:"James Smith"},
  {key:2, label:"John Williams"},
  {key:3, label:"David Miller"},
  {key:4, label:"Linda Brown"}
];

scheduler.createTimelineView({
  name: "timeline",
  x_unit:   "hour",
  x_date: "%H:%i",
  x_step:   1,
  x_size: 24,
  x_start: 0,
  y_unit:   sections,
  y_property:   "section_id",
  render:"bar",
  event_dy:"full"
});
//scheduler.date.timeline_start = scheduler.date.week_start;


//===============
//Data loading
//===============
scheduler.config.lightbox.sections=[
  {name:"description", height:50, map_to:"text", type:"textarea" , focus:true},
  {name:"custom", height:30, type:"select", options:sections, map_to:"section_id" },
  {name:"time", height:72, type:"time", map_to:"auto"}
];
scheduler.config.readonly = true;
scheduler.init('scheduler_here',new Date(2021,5,30),"timeline");
scheduler.parse([
  { start_date: "2021-06-30 00:00", end_date: "2021-07-01 23:59", text:"", section_id:1, color:"red"},

  { start_date: "2021-06-30 00:00", end_date: "2021-06-30 23:59", text:"", section_id:2, color:"red"},

  { start_date: "2021-06-30 00:00", end_date: "2021-06-30 23:59", text:"", section_id:3, color:"red"},

  { start_date: "2021-06-30 00:00", end_date: "2021-06-30 23:59", text:"", section_id:4, color:"red"}
]); 

<link rel="stylesheet" type="text/css" href="https://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler_material.css">
<script src="https://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.js"></script>
<script src="https://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js"></script>
<style>
  html, body{
     padding:0;
     margin: 0;
  }
</style>

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
    <div class="dhx_cal_navline">
        <div class="dhx_cal_prev_button">&nbsp;</div>
        <div class="dhx_cal_next_button">&nbsp;</div>
        <div class="dhx_cal_today_button"></div>
        <div class="dhx_cal_date"></div>

    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>

Answer 1

I'm assuming you identify a non-active driver, as a driver who has a "red" event from your example in the currently displayed timespan. If so, you can get the displayed timespan using scheduler.getState() method:

var start = scheduler.getState().min_date;
var end = scheduler.getState().max_date;

When you have date boundaries, you can use the scheduler.getEvents() method to get all scheduler events for that range:

var events = scheduler.getEvents(start, end);

and then find out which section_id's are present in these events:

var inactiveSectionsHash = {};
events.forEach(function(event){
   inactiveSectionsHash[event.section_id] = true;
});
var inactiveSections = [];
for(var i in inactiveSectionsHash ){
    inactiveSections.push(i);
}

You can determine the number of active / inactive drivers like this:

let inactiveDrivers = 0;
events.forEach(event => {
    if (event.color === "red") {
        inactiveDrivers++
    }
});
let activeDrivers = sections.length - inactiveDrivers;

If you want to calculate it each time the displayed date changes, you can do it using onParse and onViewChange events. Here is a complete snippet: https://snippet.dhtmlx.com/mbzk6sxv.