Multi day units view

Scheduler
#1

I plan on implementing a multi day units view, just like this sample.
https://docs.dhtmlx.com/scheduler/samples/03_extensions/31_units_view_multiple_days.html

The question is can each day have different units, as each unit represents staff members working who may be different each day.

#2

Hello @craigvn,

Yes, it can be implemented with Multiple Schedulers functionality:
https://docs.dhtmlx.com/scheduler/multiple_per_page.html

The idea is to create few schedulers, and set Units view for each of them, like follows:

const scheduler = Scheduler.getSchedulerInstance();
const scheduler_2 = Scheduler.getSchedulerInstance();
const scheduler_3 = Scheduler.getSchedulerInstance();

scheduler.createUnitsView({
    name:"unit",
    property:"unit_id", //the mapped data property
    list:[              //defines the units of the view
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"}  
    ] 
});
scheduler_2.createUnitsView({
    name:"unit",
    property:"unit_id", //the mapped data property
    list:[              //defines the units of the view
        {key:1, label:"Section 2"},
        {key:2, label:"Section 22"},
        {key:3, label:"Section 222"}  
    ] 
});
scheduler_3.createUnitsView({
    name:"unit",
    property:"unit_id", //the mapped data property
    list:[              //defines the units of the view
        {key:1, label:"Section 3"},
        {key:2, label:"Section 33"},
        {key:3, label:"Section 333"}  
    ] 
});

Here is a demo:
https://snippet.dhtmlx.com/xgr867z4

Kind regards,

#3

This is an interesting option. For this to be an option it would need to

  1. Hide the time except on the left column
  2. Only show the scrollbar on the right column

Get the columns to move together when scrolling.

#4

Hello @craigvn,

All of these queries can be implemented:

Regarding this one:

Hide the time except on the left column

It can be done by the xy.scale_width config, like follows:

scheduler_2.xy.scale_width = scheduler_3.xy.scale_width = 0;

Regarding this one:

Only show the scrollbar on the right column

It also can be done with two steps, by setting the xy_scroll width for two left schedulers, and hiding scrollbars by CSS:

// JS
scheduler.xy.scroll_width = scheduler_2.xy.scroll_width = 0;

// CSS
    #scheduler_here > .dhx_cal_data::-webkit-scrollbar{
        display: none;
    }
    #scheduler_here_2 > .dhx_cal_data::-webkit-scrollbar{
        display: none;
    }

Regarding this one:

Get the columns to move together when scrolling.

It can be done using custom JS scroll listener, by scrolling all schedulers, while you scrolling one of them:

let sched1 = document.querySelector("#scheduler_here  > .dhx_cal_data" )
let sched2 = document.querySelector("#scheduler_here_2 > .dhx_cal_data")
let sched3 = document.querySelector("#scheduler_here_3 > .dhx_cal_data")
sched1.addEventListener("scroll", event => {
    sched2.scrollTo(0, sched1.scrollTop);
    sched3.scrollTo(0, sched1.scrollTop); 
})
sched2.addEventListener("scroll", event => {
    sched1.scrollTo(0, sched2.scrollTop);
    sched3.scrollTo(0, sched2.scrollTop); 
})
sched3.addEventListener("scroll", event => {
    sched1.scrollTo(0, sched3.scrollTop);
    sched2.scrollTo(0, sched3.scrollTop); 
})

Here is a demo:
https://snippet.dhtmlx.com/qdlfi5om

Kind regards,