Timeline doesn't work anymore

[SimonF]

Hi,

Switching from Version SmartClient_v100p_2014-12-17_Pro to SmartClient_v100p_2014-12-18_Pro and above the timeline doesn't work anymore.

We also tested it with the latest nightly SmartClient_v100p_2014-12-19_Pro. It occurs in all browsers (Firefox 34, Chrome 39, IE11). There is a js-error in the console (TypeError: _1.body is null)

This code worked in the 2014-12-17 build, but doesn't work with >2014-12-18 builds.

isc.Timeline.create({
	"width" : "100%",
	"height" : "100%",
	"overflow" : "auto",
	"hideUsingDisplayNone" : false,
	"startDate" : new Date(2014, 11, 15),
	"endDate" : new Date(2015, 0, 11),
	"firstDayOfWeek" : 1,
	"todayBackgroundColor" : "#E0E0E0",
	"showEventDescriptions" : false,
	"showEventHeaders" : false,
	"eventSnapGap" : 1.6,
	"labelColumnWidth" : 200,
	"alternateLaneStyles" : true,
	"laneFields" :
	[{
			"name" : "title",
			"title" : "&nbsp",
			"type" : "text",
			"canEdit" : false
		}
	],
	"lanes" :
	[{
			"hierarchyLevel" : 0,
			"height" : 30,
			"name" : "1",
			"title" : "Muster, Max"
		}, {
			"hierarchyLevel" : 1,
			"height" : 30,
			"name" : "2",
			"title" : "Simon, Neal"
		}
	],
	"data" :
	[{
			"lane" : "1",
			"description" : "",
			"startDate" : new Date(2015, 0, 1, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2015, 0, 1, 23, 59),
			"name" : "&nbsp"
		}, {
			"lane" : "1",
			"description" : "",
			"startDate" : new Date(2014, 11, 25, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2014, 11, 25, 23, 59),
			"name" : "&nbsp"
		}, {
			"lane" : "1",
			"description" : "",
			"startDate" : new Date(2014, 11, 26, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2014, 11, 26, 23, 59),
			"name" : "&nbsp"
		}, {
			"lane" : "2",
			"description" : "",
			"startDate" : new Date(2015, 0, 1, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2015, 0, 1, 23, 59),
			"name" : "&nbsp"
		}, {
			"lane" : "2",
			"description" : "",
			"startDate" : new Date(2014, 11, 25, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2014, 11, 25, 23, 59),
			"name" : "&nbsp"
		}, {
			"lane" : "2",
			"description" : "",
			"startDate" : new Date(2014, 11, 26, 0, 0),
			"backgroundColor" : "#74A5D2",
			"showDate" : true,
			"endDate" : new Date(2014, 11, 26, 23, 59),
			"name" : "&nbsp"
		}
	]
})

Best Regards

[Isomorphic]

Thanks for the heads-up - this has been fixed for tomorrow's build, dated December 20, and later

[SimonF]

Thanks for the fast answer. The timeline is now shown again, but there are serious bugs in the event drawing.
In the example-screenshots below you can see a "small" difference drawing the same data. Once with the SmartClient_v100p_2014-12-17_Pro and the other with SmartClient_v100p_2014-12-22_Pro. The version of 22nd December seems pretty much demolished. It looks like every event is not correct at all. some events are drawn, but it seems to be not reasonable. Also the grid is colored in a different way.

At this point i have to ask if there were any test on the changes between 17th December and the 22nd December.

SmartClient_v100p_2014-12-17_Pro


SmartClient_v100p_2014-12-22_Pro


Same code for both versions to reproduce this

isc.Timeline.create(
          {
           "ID":"timeline_17",
           "width":"100%",
           "height":"100%",
           "overflow":"auto",
           "hideUsingDisplayNone":false,
           "startDate":new Date (2014,11,22),
           "endDate":new Date (2015,0,18),
         
           "canEditEvents":false,
           "canCreateEvents":false,
           "autoFetchData":true,
           "showControlsBar":false,
           "firstDayOfWeek":1,
           "weekPrefix":"Kalenderwoche",
           "todayBackgroundColor":"#E0E0E0",
           "showEventDescriptions":false,
           "showEventHeaders":false,
           "getDateCSSText":function (date, rowNum, colNum, viewer) {
					if (colNum != 0 && (date.getDay() == 6 || date.getDay() == 0))
						return "background-color: #74A5D2";
					else
						return this.Super("getDateCSSText", arguments);
				},
           "eventSnapGap":1.6,
           "labelColumnWidth":75,
           "alternateLaneStyles":true,
           "laneFields":
           [
            {
             "name":"title",
             "title":"&nbsp",
             "type":"text",            
             "canEdit":false
            }
           ],
           "lanes":
           [
            {
             "hierarchyLevel":0,
             "height":30,
             "name":"1",
             "title":"1st lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"8",
             "title":"2nd lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"7",
             "title":"3rd lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"6",
             "title":"4th lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"5",
             "title":"5th lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"4",
             "title":"6th lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"3",
             "title":"7th lane"
            },
            {
             "hierarchyLevel":1,
             "height":30,
             "name":"2",
             "title":"8th lane"
            }
           ],
           "data":
           [
            {
             "lane":"1",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"1",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"1",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"1",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"8",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"8",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"8",
             "description":"",
             "startDate":new Date (2014,11,22,12,0),
             "backgroundColor":"#59BFCE",
             "showDate":true,
             "endDate":new Date (2014,11,23,12,0),
             "name":"&nbsp"
            },
            {
             "lane":"8",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"8",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"7",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"7",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"7",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"7",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#59BFCE",
             "showDate":true,
             "endDate":new Date (2015,0,2,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#59BFCE",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2015,0,15,0,0),
             "backgroundColor":"#59BFCE",
             "showDate":true,
             "endDate":new Date (2015,0,16,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"6",
             "description":"",
             "startDate":new Date (2015,0,8,0,0),
             "backgroundColor":"#59BFCE",
             "showDate":true,
             "endDate":new Date (2015,0,9,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"5",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"5",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"5",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"5",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"4",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"4",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"4",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"4",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"3",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"3",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"3",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"3",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"2",
             "description":"",
             "startDate":new Date (2014,11,25,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,25,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"2",
             "description":"",
             "startDate":new Date (2014,11,26,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2014,11,26,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"2",
             "description":"",
             "startDate":new Date (2015,0,1,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,1,23,59),
             "name":"&nbsp"
            },
            {
             "lane":"2",
             "description":"",
             "startDate":new Date (2015,0,6,0,0),
             "backgroundColor":"#74A5D2",
             "showDate":true,
             "endDate":new Date (2015,0,6,23,59),
             "name":"&nbsp"
            }
           ]
          }
          )

[Isomorphic]

What changed was a fix to the definition of the attribute Calendar.eventSnapGap - historically, this had always been a minute-based value but had been changed earlier in the year (in 9.1 and 10.0) to be a pixel-based value. That change was wrong and has been reverted. See the doc for that attribute to understand the difference.

Of course these changes were tested, both manually and automatically - however, this somewhat unusual test-case of yours causes a rounding error we hadn't caught, due to it setting an eventSnapGap of 1.6 (it's an integer attribute) *minutes* (after the recent fix) in a timeline where columns represent 1440 minutes - and those columns are only 60px wide (0.04 pixels per snapGap).

We may look into this and add further autotests if necessary, but in this case, just set your eventSnapGap to a sensible minute value for the granularity you use.