а

Scheduler - Timeline multiple instances on top of each other


#1

Hi,

Im using the pro version and looking to make multiple instances of the Scheduler Timeline. This is so i can have a “week view” and a “day view”. I have been able to create multiple instances but these sit behind each other and one hides the other. This means i can only select the first instance. I cant get the buttons to appear in line with each other, if i do place the buttons next to each other then they call the ID the div is a child of and wont allow me to call the second instance.

Hope this makes sense, any help would be great.

<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 class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
            <div class="dhx_cal_tab" name="timeline_tab" style="right:250px;"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
    </div>
    <div id="scheduler_here2" 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 class="dhx_cal_tab" name="timeline_tab_day" style="right:356px;"></div>
        </div>
        <div class="dhx_cal_header"></div>
        <div class="dhx_cal_data"></div>       
    </div>
 scheduler1 = Scheduler.getSchedulerInstance();

    
    scheduler1.ignore_timeline = function(date) {
                //non-working hours
                if (date.getHours() < 6 || date.getHours() > 21 || date.getDay() === 6 || date.getDay() === 0 )
                return true;
    };

    scheduler1.locale.labels.timeline_tab ="Week";
   

    scheduler1.config.first_hour=7;
    scheduler1.config.last_hour=20;

  scheduler1.createTimelineView({
     name:"timeline",
     x_unit:"hour",//measuring unit of the X-Axis.
     x_date:"%H:%i", //date format of the X-Axis
     event_dy: "full",
     x_step:3,      //X-Axis step in 'x_unit's
     x_size:40,      //X-Axis length specified as the total number of 'x_step's
     x_start:0,     //X-Axis offset in 'x_unit's
     x_length:40,    //number of 'x_step's that will be scrolled at a time
     y_unit:         //sections of the view (titles of Y-Axis)
        [{key:1, label:"Gary Jones"},
         {key:2, label:"Jon Davis"},
         {key:3, label:"James Johnstone"},
         {key:4, label:"Sally Horse"}],
    
     y_property:"section_id", //mapped data property
     render:"bar",             //view mode
     second_scale:{
        x_unit: "day", // the measuring unit of the axis (by default, 'minute')
        x_date: "%F %d" //the date format of the axis ("July 01")
    }
});


scheduler1.init('scheduler_here', new Date(),"month");

var events = [
    {id:1, text:"Meeting",   start_date:"10/09/2017 14:00",end_date:"10/09/2017 17:00",section_id:"1"},
    {id:2, text:"Conference",start_date:"10/09/2017 12:00",end_date:"10/09/2017 19:00",section_id:"2"},
    {id:3, text:"Interview", start_date:"10/09/2017 09:00",end_date:"10/09/2017 10:00",section_id:"3"}
  ];
 
    scheduler1.parse(events, "json");






   scheduler2 = Scheduler.getSchedulerInstance();

   scheduler2.locale.labels.timeline_tab_day = "Day";
    


  scheduler2.createTimelineView({
     name:"timeline",
     x_unit:"hour",//measuring unit of the X-Axis.
     x_date:"%H:%i", //date format of the X-Axis
     event_dy: "full",
     x_step:10,      //X-Axis step in 'x_unit's
     x_size:30,      //X-Axis length specified as the total number of 'x_step's
     x_start:0,     //X-Axis offset in 'x_unit's
     x_length:8,    //number of 'x_step's that will be scrolled at a time
     y_unit:         //sections of the view (titles of Y-Axis)
        [{key:1, label:"Gary Jones"},
         {key:2, label:"Jon Davis"},
         {key:3, label:"James Johnstone"},
         {key:4, label:"Sally Horse"}],
    
     y_property:"section_id", //mapped data property
     render:"bar",             //view mode
     second_scale:{
        x_unit: "day", // the measuring unit of the axis (by default, 'minute')
        x_date: "%F %d" //the date format of the axis ("July 01")
    }
});


scheduler2.init('scheduler_here2', new Date(),"month");

 
scheduler2.parse(events, "json");

Thank you


#2

Hi,

As I see in your code, you have 2 instances:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div id="scheduler_here2" class="dhx_cal_container" style='width:100%; height:100%;'>

and both of them have “height: 100%”.

The correct solution is to display instances in one of the next ways:
docs.dhtmlx.com/scheduler/sampl … ayout.html
or
docs.dhtmlx.com/scheduler/sampl … query.html

I cant get the buttons to appear in line with each other, if i do place the buttons next to each other then they call the ID the div is a child of and wont allow me to call the second instance.
Which buttons do you mean?

Possibly you can attach a screenshot to help us undestand what you want to achieve.