showHeader:false in Timeline

[SimonF]

Hi there,

I'm searching for a method to hide the headerlevels completely. In my case i know, that there are plenty of informations in the events, so the headerLevels are not needed to display.

For example i have this little timeline.

Here i want to remove the first row (1/1 | 1/2 | 1/3 | 1/4 ...). In the Listgrid there is an option called showHeader with does exactly what i'm trying to get, but because Timeline extends Calendar, which extends canvas, this method is not available.

However is there an option i haven't seen to achieve this?

In addition I want to remove the grey border around the timeline. Setting the border-attribute in the initialization doesn't seem to remove the border, but add an additional border to it:
(For visualization I have set it to "1px solid red", later i want to use "none")

Here is the example code:

isc.Timeline.create({
	ID : "timeline",
	height : 58,
	showDayHeaders : false,
	startDate : new Date(2015, 0, 1),
	endDate : new Date(2015, 0, 31),
	lanes : [{
			name : "charlesMadigen",
			title : "Charles Madigen",
			height : 30
		}
	],
	headerLevels : [{
			"unit" : "day",
			"headerWidth" : 30
		}
	],
	laneFields : [{
			name : "title",
			title : " ",
			width : 100
		}
	],
	canEditLane : true,
	showEventDescriptions : false,
	labelColumnWidth : 200,
	showControlsBar : false,
	border : "1px solid red"
});

[Isomorphic]

Removing the headers from a timeline seems a little quirky, even if your events show all the appropriate information - if a user navigates to an timeframe with no current events, there would be no way to tell what each cell represents.

But, if you want to do that, you can set showHeader: false, and indeed border: "none", on the timelineView autoChild, like this:

isc.Timeline.create({
    ...
    timelineViewProperties: { 
        showHeader: false, 
        border: "none"
    }
}

You didn't mention your version, but if it's 10.0 or later, you might also want to check the docs for calendar.showViewHovers and similar, which can configure the timeline to show the date/lane under the mouse in a hover.

[SimonF]

Thank's for the hint to timelineViewProperties.

In another case i want to show only one timeline with (in the example below) a button. It looks like there is a minimal height of the timeline (about 100 pixel).
There is always this gap between the timeline and the button no matter what attributes i'm setting. I also have tried to set "defaultHeight : 55" which is by default 100, but changing this in the timeline itself or in the timelineViewProperties doesn't change anything.


Is there another option - by setting a different height which i'm not using by now - to close this gap completely?

Code to reproduce:

isc.VLayout.create({
	"ID" : "rootLayout_5",
	"autoDraw" : true,
	"width" : "100%",
	"members" :
	[
		isc.Timeline.create({
			ID : "timeline",
			timelineViewProperties : {
				border : "none"
			},
			rowHeight : 30,
			height : 55,
			defaultHeight : 55,
			showDayHeaders : false,
			startDate : new Date(2015, 0, 1),
			endDate : new Date(2015, 0, 31),
			lanes : [{
					name : "1",
					title : "Mr White",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			"data" :
			[{
					"lane" : "1",
					"description" : "Important event",
					"startDate" : new Date(2015, 0, 2, 0, 0),
					"timelineGeneratedIndex" : "1",
					"backgroundColor" : "#FF0000",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 2, 23, 59),
					"name" : "&nbsp"
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			showEventHeaders : false
		}),
		isc.Button.create({
			ID : "button",
			height : 20,
			width: 300,
			title : "testButton should direct under the timeline"
		})
	]
});

[Isomorphic]

The Calendar (Timeline) is overflowing due to one of it's children - we'll address it in the framework, but if you like, but you can work around it by just applying your defaultHeight setting to the eventEditorLayout autochild, lilke this:

...
eventEditorLayoutProperties: { defaultHeight: 55 }

[SimonF]

thanks, for the quick response.
that solves the problem for displaying it with header. If you want to hide the headers, i think the height might get calculated wrong.

See here

isc.VLayout.create({
	"ID" : "rootLayout_5",
	"autoDraw" : true,
	"width" : "100%",
	"members" :
	[
		isc.Timeline.create({
			ID : "timeline",
			timelineViewProperties : {
				border : "none",
				defaultHeight : 55
			},
			timelineViewProperties: { 
				showHeader: false
			},
			eventEditorLayoutProperties: { defaultHeight: 0 },
			rowHeight : 30,
			height : 55,
			defaultHeight : 55,
			showDayHeaders : false,
			startDate : new Date(2015, 0, 1),
			endDate : new Date(2015, 0, 31),
			lanes : [{
					name : "1",
					title : "Mr White",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			"data" :
			[{
					"lane" : "1",
					"description" : "Important event",
					"startDate" : new Date(2015, 0, 2, 0, 0),
					"timelineGeneratedIndex" : "1",
					"backgroundColor" : "#FF0000",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 2, 23, 59),
					"name" : "&nbsp"
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			showEventHeaders : false
		}),
		isc.Button.create({
			ID : "button",
			height : 20,
			width: 300,
			title : "testButton should be direct under the timeline"
		})
	]
});

[Isomorphic]

We're not following - you're setting the default height to 55, and that's the height it's being rendered at - if you want the timeline as a whole to be no taller than one row, make it the same height as the row

[SimonF]

Oh :-(, sure - sorry my mistake.

I have tried to experiment with the timeline to archieve some kind of a year-overline with timelines. By now smartclient hasn't such a feature, or only offers it via feature sponsorship.

By now i have split the year in different timelines per month. But there seems to be a visual gap between each timeline, which I wasn't able to close by now. Minimizing the set attributes, results in removing the grey line around after the lane. So i think there is one attribute that I'm not using or i have set to the wrong value.
Do you have any suggestion how to close this gap?

I'm sure implementing a year-overview by ourself with timelines for each month would do the job, but there would be probably multiple visual issues, which could be solved by using undocumented features like the eventEditorLayoutProperties. I don't know if it's suitable for us to implement a year-overview with this sliced-technique.

This is how far i came by now. There you can see about 1 pixel margin between the first timeline and the second, or between the second and the third.


Code for reproduction:

isc.VLayout.create({
	"ID" : "rootLayout_5",
	"width" : "100%",
	"height" : "100%",
	"autoDraw" : true,
	"hideUsingDisplayNone" : false,
	"leaveScrollbarGap" : false,
	"members" :
	[
		isc.Timeline.create({
			ID : "timeline",
			timelineViewProperties : {
				border : "none"
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 55,
			showDayHeaders : false,
			startDate : new Date(2015, 0, 1),
			endDate : new Date(2015, 0, 31),
			contextMenu : theContextMenu,
			lanes : [{
					name : "1",
					title : "January",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30,
					"titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
						return ""+startDate.getDate();
					}
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			"data" :
			[{
					"lane" : "1",
					"description" : "Important event",
					"startDate" : new Date(2015, 0, 2, 0, 0),
					"timelineGeneratedIndex" : "1",
					"backgroundColor" : "#CF0",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 2, 23, 59),
					"name" : "&nbsp"
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		}),
		isc.Timeline.create({
			ID : "timeline2",
			timelineViewProperties : {
				showHeader : false,
				border : "none"
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 32,
			showDayHeaders : false,
			startDate : new Date(2015, 1, 1),
			endDate : new Date(2015, 1, 28),
			contextMenu : theContextMenu,
			lanes : [{
					name : "charlesMadigen",
					title : "February",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		}),
		isc.Timeline.create({
			ID : "timeline3",
			timelineViewProperties : {
				showHeader : false,
				border : "none"
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 32,
			showDayHeaders : false,
			startDate : new Date(2015, 2, 1),
			endDate : new Date(2015, 2, 31),
			contextMenu : theContextMenu,
			lanes : [{
					name : "charlesMadigen",
					title : "March",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		}),
		isc.Timeline.create({
			ID : "timelin4",
			timelineViewProperties : {
				showHeader : false,
				border : "none"
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 32,
			showDayHeaders : false,
			startDate : new Date(2015, 3, 1),
			endDate : new Date(2015, 3, 30),
			contextMenu : theContextMenu,
			lanes : [{
					name : "charlesMadigen",
					title : "April",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		}), ,

		isc.Timeline.create({
			ID : "timelin5",
			timelineViewProperties : {
				showHeader : false,
				border : "none"
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 32,
			showDayHeaders : false,
			startDate : new Date(2015, 4, 1),
			endDate : new Date(2015, 4, 31),
			contextMenu : theContextMenu,
			lanes : [{
					name : "charlesMadigen",
					title : "May",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		})
	]
});

[SimonF]

At the current level I have the problem, that between the timeline and for example a button there seems to be a small gap.


I'm trying to close the gap between the timeline and the button, so that the button is direct beneath the timeline. Is there a way to archieve this?

Here is the code, where you can see this small gap:

isc.VLayout.create({
	"ID" : "rootLayout_5",
	"width" : "100%",
	"height" : "100%",
	"autoDraw" : true,
	"hideUsingDisplayNone" : false,
	"leaveScrollbarGap" : false,
	"members" :
	[
		isc.Timeline.create({
			ID : "timeline",
			timelineViewProperties : {
				border : "none",
				height:55
			},
			eventEditorLayoutProperties : {
				defaultHeight : 0
			},
			height : 55,
			showDayHeaders : false,
			startDate : new Date(2015, 0, 1),
			endDate : new Date(2015, 0, 31),
			lanes : [{
					name : "1",
					title : "January",
					height : 30
				}
			],
			headerLevels : [{
					"unit" : "day",
					"headerWidth" : 30,
					"titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
						return ""+startDate.getDate();
					}
				}
			],
			laneFields : [{
					name : "title",
					title : " ",
					width : 100
				}
			],
			"data" :
			[{
					"lane" : "1",
					"description" : "Important event",
					"startDate" : new Date(2015, 0, 2, 0, 0),
					"timelineGeneratedIndex" : "1",
					"backgroundColor" : "#CF0",
					"showDate" : true,
					"endDate" : new Date(2015, 0, 2, 23, 59),
					"name" : "&nbsp"
				}
			],
			canEditLane : true,
			showEventDescriptions : false,
			labelColumnWidth : 200,
			showControlsBar : false,
			"canEditEvents" : false,
			"canCreateEvents" : false,
			"showControlsBar" : false,
			"firstDayOfWeek" : 1,
			"showEventDescriptions" : false,
			"showEventHeaders" : false
		}),
		isc.Button.create({
			ID : "button",
			height : 20,
			width: 300,
			title : "testButton should be direct under the timeline"
		}),
		isc.Button.create({
			ID : "button",
			height : 20,
			width: 300,
			title : "buttons are direct under each other"
		})
	]
});

best regads and thanks in advance

[Isomorphic]

If you change your code as shown below, you should see the effect you're after. You'll need to give your two buttons different IDs, of course.

Note that a couple of tweaks have been made around the Calendar's edit dialog today, so if you see issues running with the changes below, please retest with tomorrow's build before coming back to us. With tomorrow's build, you won't need the eventEditorLayoutProperties block in your sample either.

                        timelineViewProperties : {
                            border: "0px solid",
                            height: 53
                        },
                        height: 1,
                        overflow: "visible",
                        border: "0px solid",

[SimonF]

Thanks for the fast response. I have tested the snippet above with the latest nightly (SmartClient_v100p_2015-04-21_Pro) and it works like i want it.

I have stepped over two other issues experimenting with the timeline.

1. Event backgroundClick
This event does get fired, if you click on a free space in the calender like shown in the gif below. But if you click on a weekend (weekend-color of 3rd and 4th January seems to be badly visible in the gif - sorry), instead of firing the event, the whole row will be selected.
The same happens with the event: backgroundMouseUp

I think, even clicking on a weekend-element should fire the same backgroundclick-event. There is another method defined in the docs named "dayBodyClick", but i assume that this is only valid for the monthview like stated through the categoryname.

2. canCreateEvents: false
If i set "canCreateEvents" to false, the clicks on the background aren't executed (neither backgroundMouseUp nor backgroundClick). I'm not sure if this behaviour is right, even if i don't want to show the event-editor doesn't mean i dont want to catch the click-event to start my own interaction with the user (for example showing a new window).

Here is the code to reproduce this behaviour:

isc.Timeline.create({
	ID : "timeline",
	timelineViewProperties : {
		border : "0px solid",
		height : 53
	},
	height : 1,
	overflow : "visible",
	border : "0px solid",
	eventEditorLayoutProperties : {
		defaultHeight : 0
	},
	showDayHeaders : false,
	startDate : new Date(2015, 0, 1),
	endDate : new Date(2015, 0, 31),
	lanes : [{
			name : "1",
			title : "January",
			height : 30
		}
	],
	headerLevels : [{
			"unit" : "day",
			"headerWidth" : 30,
			"titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
				return "" + startDate.getDate();
			}
		}
	],
	laneFields : [{
			name : "title",
			title : " ",
			width : 100
		}
	],
	"data" :
	[{
			"lane" : "1",
			"description" : "Important event",
			"startDate" : new Date(2015, 0, 2, 0, 0),
			"timelineGeneratedIndex" : "1",
			"backgroundColor" : "#CF0",
			"showDate" : true,
			"endDate" : new Date(2015, 0, 2, 23, 59),
			"name" : "&nbsp"
		}
	],
	canEditLane : true,
	showEventDescriptions : false,
	labelColumnWidth : 200,
	// canCreateEvents: false
	backgroundClick : function (startDate, endDate) {
		console.log("backgroundClick");
		return false;
	}
	eventClick : function (event, viewName) {
		console.log("eventclick");
		return false
	},
});

best regards

[SimonF]

Maybe you could help me with another problem of mine related to the timeline.
I want to add text on every dayCell.
It looks like that the method i want is already implemented in "getDayBodyHTML " but this is only called for the monthView.
Is it possible to call some similar method, which sets a text or image in a specific cell like in the monthView?
This would possible be the result of such a method.

Because there could be some calendarEvents in the timeline, the behaviour could be that the displayed text is always in the back or maybe always at the front of all displayed events from that day.

thanks in advance

[Isomorphic]

1) set disableWeekends: false will address it - we'll take a look at why rows are being selected in the coming weeks

2) don't set canCreateEvents: false - instead, have your backgroundClick/MouseUp handlers return false, which cancels their default behavior.

3) showing text in date-cells. There's no immediate, supported way to do this. If you need it, consider Feature sponsorship.

[SimonF]

thanks,

1) yes "disableWeekends: false" does fix it, but seems to be a workaround.

2) good point, thanks.

3) Thanks, i will contact smartclient-support via the contact form to get the information how much this would cost.