Vertical groups of units

Scheduler
#1

I have implemented the units view for my specific application, I have 15 sections that can be shown but I don’t like having to scroll horizontally to see all of the sections.

I would prefer to show all of them at once on the view, for example group the sections into groups of 5 and showing the three groups stacked on top of each other.

I can do that by creating three dhtmlxscheduler instances and setting units view in each scheduler for each group of 5 sections which comes very close to what I want.

However it’s awkward because I have also implemented timeline and switching to the timeline view can only be done per each scheduler rather than for all the groups and can only scrolling through dates in one scheduler at a time rather than having all the three schedulers scroll at the same time.

I believe I should be able to add a listener to the date left and right buttons and then call methods on each scheduler to scroll through the dates.

But it’s not ideal and I don’t see a way to be able to have a single timeline view showing all 15 sections since I have three instances on the page.

Is there a way for me to create a units view for just one scheduler instance and have the sections be stacked vertically in groups if they exceed a certain count?

Basically instead of having horizontal scroll in steps of 5, wrap the sections around in steps of 5.

Thanks

#2

Hello @alexbenjm,

Unfortunately, there is no ability to have 3 lines of unit sections in one timeline(if I understand you correctly).
Looks like your solution with 3 schedulers one under one is the most appropriate option for this case.

You can synchronize all 3 schedulers to be scrolled together with the code like follows:

function init() {
  
  // Create Main cheduler
  scheduler1  = Scheduler.getSchedulerInstance();
  scheduler1.init('scheduler_here',new Date(2019,5,30),"week");
  scheduler1.parse(<data>)

  scheduler1.attachEvent("onViewChange", function (new_mode , new_date){
    console.log("pdd")
    scheduler2.setCurrentView(new Date(new_date));
    scheduler3.setCurrentView(new Date(new_date));
  });
              
  // Create additiona schedulers
  scheduler2 = Scheduler.getSchedulerInstance();
  scheduler3 = Scheduler.getSchedulerInstance();
  scheduler2.config.header =  scheduler3.config.header = [
    "date",
  ];

  scheduler2.init('scheduler_here_2',new Date(2019,5,30),"week");
  scheduler2.parse(<data>)
  scheduler3.init('scheduler_here_3',new Date(2019,5,30),"week");
  scheduler3.parse(<data>)                               
}
init()

Here is the live demo(click the next/prev button):
http://snippet.dhtmlx.com/5/9aab17a7e

API:
onViewChange:
https://docs.dhtmlx.com/scheduler/api__scheduler_onviewchange_event.html
setCurrentView:
https://docs.dhtmlx.com/scheduler/api__scheduler_setcurrentview.html

#3

Thank you for the example that was very helpful!

#4

Hello again, the setCurrentView code works if the schedulers’ current views are units but it seems it does not work with timeline views.

I have several scheduler instances, all which implement both units and timeline views. When I am in the timeline view, the synchronized date scrolling no longer work. I verified in my browser’s debugger that the “onViewChange” event is fired on the first scheduler and the attached function is being executed with the new_mode and new_date being passed to the setCurrentView functions on all of the other schedulers. However the other schedulers do not update with the new date when their current view is timeline.

Do you have any suggestions?

Thank you

#5

Making a correction here, I realized that the setCurrentView does work for the timelines view. The problem is something else.

I have configured the schedulers’ timeview to display the hours in 30 minutes increments and to advance by 4 hours each time the date scroll buttons are clicked.

The problem is that when setCurrentView is called with the new date, the timelines view changes to the month and day but it does not update to match the exact hours that are showing in the first scheduler’s timelines view.

As long as the first scheduler’s timeline view is still showing hours from the same day and month, the other schedulers appear not to change at all. It’s only when the first scheduler advances into the next day when there is a visible change. This is what fooled me into thinking that the synchronized scrolling wasn’t working.

It is working, but it’s not taking into account the precise hours that are showing in the first scheduler’s timeline view.

Is there a way to make sure that the exact shown hours are visible in all the schedulers?

#6

Hello @alexbenjm,

Looks like I didn’t test this scenario, sorry for that.

You can fix it with a special logic, to dynamically set the x_start parameter of additional timeline views based on hours of the “main” timeline.

The code for the following config of main timeline(and same “children”):

scheduler1.createTimelineView({
  name:	"timeline",
  x_unit:	"minute",
  x_date:	"%H:%i",
  x_step:	30,
  x_size: 24,
  x_start: 0,
  x_length: 24,
  y_unit:	sections,
  y_property:	"section_id",
  render:"bar",
  second_scale:{
    x_unit: "hour", 
    x_date: "%H %i" 
  }
});

Can look like follows:

  scheduler1.attachEvent("onViewChange", function (new_mode , new_date){
    var timeline2 = scheduler2.getView("timeline");
    var timeline3 = scheduler3.getView("timeline");

    if(new Date(new_date).getHours() == 12) {
      timeline2.x_start = 24;
      timeline3.x_start = 24;
    }
    else{
      timeline2.x_start = 0;
      timeline3.x_start = 0;
    }
    scheduler2.setCurrentView(new Date(new_date));
    scheduler3.setCurrentView(new Date(new_date));
  });

So, additional timelines will receive start hours(x_start), based on the main one.

Here is a demo:
http://snippet.dhtmlx.com/5/6cc8aaba8

#7

Thank you for the example, that was very helpful.

In the end, I found it easier to keep a reference to scheduler1’s own timeline and then setting timeline2.x_start and timeline3.x_start to be equal to the scheduler1’s timeline x_start property.

1 Like