Events is not loaded correctly after scroll


#1

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">&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="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>
`

#2

Hello @einar_adolfsen,

Thank you for the detailed description of the issue. It looks like a bug in our end, I sent it to our dev team and they will work on a fix. Unfortunately, I can’t give you any ETA, but I will post in this thread when the issue will be fixed.

This issue connected with a “scrollable” and can be fixed in two ways:

  1. Remove the “scrollable” parameter from the “timeline_week” view:
scheduler.createTimelineView({
  name: "timelineWeek",
  render: "bar",
  x_unit: "day",
  x_date: "%d %D",
  x_step: 1,
  x_size: 7,
  x_length: 1,
  y_unit: sections,
  y_property: "section_id",
  //scrollable: true,
  column_width: 100,
  event_dy: "full"
});
  1. Manually rerender the “icorrect” view, with the “updateView” method:
scheduler.attachEvent("onViewChange", function (new_mode , new_date){
  setTimeout(()=>{
    scheduler.updateView();
  },1)
});

Here is the demo:
http://snippet.dhtmlx.com/5/7a899bfed