Timeline with headerWidth streches event

[SimonF]

We' working with a Timeline and using the "headerWidth" in the "headerLevels".
Because the width of the timeline-days were too big we reduced the width of the items. If we do so the events are no longer correctly displayed. The start time ist at the beginning on the left instead of the center of the day.

This is the currently result

and this is the result if we delete the headerWidth:


Also there seems to be an issue with the positioning, because 12pm ist not centered in the day itself.

We currently working with SmartClient_v100p_2014-10-16_Pro, and the issue exists in firefox and chrome.


You can reproduce the issue with following code

isc.Timeline.create({
	"width" : "100%",
	"height" : "100%",
	"hideUsingDisplayNone" : false,
	"startDate" : new Date(2014, 9, 13),
	"endDate" : new Date(2014, 10, 9),
	"firstDayOfWeek" : 1,
	"alternateLaneStyles" : true,
	"laneFields" :
	[{
			"name" : "title",
			"title" : "&nbsp",
			"type" : "text",
			"canEdit" : false
		}
	],
	"headerLevels" :
	[{
			"unit" : "day",			
            "headerWidth":39,
			 "titleFormatter":function (headerLevel, startDate, endDate, defaultValue, viewer) {
				return startDate.getDate();
		}}
	],
	"lanes" :
	[{
			"height" : 30,
			"name" : "1",
			"title" : "Item 1"
		}, {
			"height" : 30,
			"name" : "2",
			"title" : "Item 2"
		}
	],
	"data" :
	[{
			"lane" : "1",
			"description" : "this is a description",
			"startDate" : new Date(2014, 9, 17, 12, 0),
			"backgroundColor" : "#00BD02",
			"showDate" : true,
			"endDate" : new Date(2014, 9, 20, 23, 59),
			"name" : "&nbsp"
		}
	]
})

[SimonF]

any ideas to this?

[Isomorphic]

See the doc for eventSnapGap - the default is 20, and the default column width is 60, meaning that when columns represent 24 hours, the default behavior is to render events at midnight, 8am and 4pm.

In your case, the short answer is that you need to be a bit more careful about the column width you choose - specifically, pick one that divides by 24.

If you want events to render with hourly precision, set eventSnapGap to 1 and set your column widths to 24 (or 48, and eventSnapGap:2)

[SimonF]

Thanks! With eventSnapGap the events are corretly displayed. We didn't know this exists.