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


#3

Hi,
Thank you so much, in our production code we tried to update the view in onViewChange without any luck. When adding setTimeout, it refreshes the view as expected :slight_smile:

I agree with you, it would be nice if changing between scrollable views will be addressed.

Best regards,
Einar Adolfsen


#4

Hello @einar_adolfsen,

The issue was fixed in the scheduler v5.3.9.
You can find the full list of updates by the following link
https://docs.dhtmlx.com/scheduler/what_s_new.html#539