0

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>
sultan ali
  • 1
  • 1

1 Answers1

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.

Maksim Lakatkou
  • 26
  • 1