Hi,
I’ve a problem loading events correctly after changing from day view to week view.
I have copied 06_timeline>02_lines.html sample from schedular_trial.zip. removed the calendar views and added two timeline views.
If the user manually scrolls the horizontal scrollbar to the right in day view then change view to week,
the bars is squashed to the left. click again on the week button and the bars in week view is displayed as expected.
How can I fix this?
`
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Bar mode</title>
<script src='../../codebase/dhtmlxscheduler.js?v=5.3.4' type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/ext/dhtmlxscheduler_timeline.js?v=5.3.4' type="text/javascript" charset="utf-8"></script>
<link rel='stylesheet' type='text/css' href='../../codebase/dhtmlxscheduler_material.css?v=5.3.4'>
<style type="text/css" >
html, body{
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener("DOMContentLoaded", function(){
scheduler.locale.labels.timelineDay_tab = "Day";
scheduler.locale.labels.timelineWeek_tab = "Week";
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: "timelineDay",
x_unit: "minute",
x_date: "%G",
x_step : 60, // X-Axis step in 'x_unit's
x_size: 24, // X-Axis length specified as the total number of 'x_step's
x_start: 0, // X-Axis offset in 'x_unit's
x_length: 24, // number of 'x_step's that will be scrolled at a time
y_unit: sections,
y_property: "section_id",
render: "bar",
scrollable: true,
//scroll_position: 6,
event_dy: "full"
});
scheduler.createTimelineView({
name: "timelineWeek",
render: "bar",
x_unit: "day",
x_date: "%d %D",
x_step: 1,
x_size: 7,
x_length: 7,
y_unit: sections,
y_property: "section_id",
scrollable: true,
column_width: 70,
event_dy: "full"
});
scheduler.date.timelineWeek_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.init('scheduler_here',new Date(2017,5,30),"timelineDay");
scheduler.parse([
{ start_date: "2017-06-30 09:00", end_date: "2017-06-30 12:00", text:"Task A-12458", section_id:1},
{ start_date: "2017-06-30 10:00", end_date: "2017-06-30 16:00", text:"Task A-89411", section_id:1},
{ start_date: "2017-06-30 10:00", end_date: "2017-06-30 14:00", text:"Task A-64168", section_id:1},
{ start_date: "2017-06-30 16:00", end_date: "2017-06-30 17:00", text:"Task A-46598", section_id:1},
{ start_date: "2017-06-30 12:00", end_date: "2017-06-30 20:00", text:"Task B-48865", section_id:2},
{ start_date: "2017-06-30 14:00", end_date: "2017-06-30 16:00", text:"Task B-44864", section_id:2},
{ start_date: "2017-06-30 16:30", end_date: "2017-06-30 18:00", text:"Task B-46558", section_id:2},
{ start_date: "2017-06-30 18:30", end_date: "2017-06-30 20:00", text:"Task B-45564", section_id:2},
{ start_date: "2017-06-30 08:00", end_date: "2017-06-30 12:00", text:"Task C-32421", section_id:3},
{ start_date: "2017-06-30 14:30", end_date: "2017-06-30 16:45", text:"Task C-14244", section_id:3},
{ start_date: "2017-06-30 09:20", end_date: "2017-06-30 12:20", text:"Task D-52688", section_id:4},
{ start_date: "2017-06-30 11:40", end_date: "2017-06-30 16:30", text:"Task D-46588", section_id:4},
{ start_date: "2017-06-30 12:00", end_date: "2017-06-30 18:00", text:"Task D-12458", section_id:4}
]);
});
</script>
</head>
<body>
<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="timelineDay_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="timelineWeek_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
`