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"> </div>
<div class="dhx_cal_next_button"> </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"> </div>
<div class="dhx_cal_next_button"> </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