How to customize the timeline?

[MarcusZ]

Hi,
while trying to implement a new feature in our product by using your timeline component, i've come to the conclusion, that it's missing different ways to customize it.
If you have a look at your reference of the timeline it contains just one attribute which isn't inherited from the calendar class.
If you use the header "week" and "day" for example, it's not possible to set the first day of the week to monday instead of sunday.
Besides i'm also unable to change der format of the day header from "7/3" to "3.7"

I'm referring to smartclient version "v8.3p_2013-03-12"

Regards
Marcus

[Isomorphic]

We've fixed support for firstDayOfWeek in this scenario and those changes will hit the nightly builds of 8.3p and 9.0d from March 14.

On specifying the titles for inner-most fields in Timelines - this is not currently possible with public APIs, but we will take a look at exposing the necessary APIs and update this thread when we have more information.

[Isomorphic]

We've added a new API, HeaderLevel.titleFormatter, to allow customization of the titles in header-spans. Take a look at the docs for that method in nightly builds of March 17 or later

[MarcusZ]

Hi,
i've seen your changes in the api and they work just fine.
Thanks for your fast help.

Regards
Marcus

[MarcusZ]

Hi,
i've found a few more things, which also could be customized.
Firstly the width of a column. Here it would be nice, if it would be possible to set the width for each headerlevel.
I also need to edit the height of every lane.
And last but not least, the hover of each event shows the events date interval.
The date has the right format, but not the time. It would be nice if it's possible to choose between the 12 and the 24 hour format and it's default value is associated to the "frameworkMessages" file

I'm refering to smartClient version v8.3p_2013-03-20

Regards Marcus

[Isomorphic]

We've made a few change to enable these features for you - please retest with a nightly dated March 24 or later

1) HeaderLevel.headerWidth - this has an effect only on the innermost headerLevel (ie, the field-headers themselves)

2) Lane.height

3) just set calendar.timeFormatter: "toShortPadded24HourTime" (the default is "toShortPaddedTime")

[levi]

Hi,

I'm on v8.3p_2013-02-13/Pro Deployment (built 2013-02-13) and testing the Timeline from SmartGWT 3.1p. Couldn't test on a more recent nightly, sorry if these things already got fixed.

* Exposing the method calendar.getEventHoverHTML() in SmartGWT.
This turns up as com.smartgwt.client.widgets.calendar.Calendar.addEventHoverHTMLHandler(EventHoverHTMLHandler)
Isn't that weird? How do I overwrite the hover this way?
I would have thought something like a com.smartgwt.client.widgets.calendar.Calendar.setMonthViewHoverHTMLCustomizer(MonthViewHoverHTMLCustomizer) instead.

* Saw the same trouble with too narrow Lane "title field" width: the title is cut off, not even wrapped. Is this field also possible to change width?
And I'm also hoping the new API supports some kind of dynamic Lane height? E.g. in the current showcase #simple_timeline sample, you can drag all events into 1 lane, and then you cannot read anything anymore. So if a Lane could grow in height in that case, that would be neat.

* I tried setting new HeaderLevel(TimeUnit.YEAR) + new HeaderLevel(TimeUnit.QUARTER) together. I see the Year columns having correct titles, and then I see 4 columns (OK) but the Quarter's field titles show up as "0:00" (NOK).

* Using the Timeline is also a POC for some case (I'm deciding between a Graph or Timeline). It's too bad Timeline isn't a DrawPane too. I want a line from top to bottom over all Lanes, would you recommend adding a transparent DrawPane child over the Timeline Canvas and do Drawing there? Or would that lead to many other troubles (event bubbling etc)?


tia,

[MarcusZ]

Thanks for your changes, they work just fine, but sadly
there're two other things which could be improved.
Firstly it's not possible to hide the datepicker and for my needs it would be nice to do so.
And the second thing is the status text between the "previous" and "next" button.
The text does display the date interval shown by the timeline. The problem is that there is always the word "through" between both dates.
I does not depend on the language i've choosen, neither is there a translation in the "frameMessages" file nor some possiblity to edit it myself.

[MarcusZ]

Hi,

i've got one question to the calendarEvent class. Is it possible to change the color of a single calendarEvent, without using the "eventWindowStyle" attribute?
We'd like to change color of an event accordingly to it's type and our customers can edit the color for the types themselves by setting an own hex string.
As you can see we need a way to change the color without creating a new css class for each color.

[Isomorphic]

No, sorry, this is not currently possible, you need a CSS class for each distinct appearance.

[MarcusZ]

Hi,
i'd like to know if there are any news about my penultimate post? I really would appreciate an update about that topic.

Thanks in advance

[MarcusZ]

Hi,
i've got a few more improvements for the timeline.
- It would be nice if it's possible to change the background color for the weekend, like it's already possible for the current day.

- For a lot of lanes it's difficult to read the timeline because the user are changing the lanes, without noticing.
The perfect solution for this problem is the same you've already using for the listgrids, the "alternateRecordStyles".

- The last improvement is one i've already mentioned in this thread. It's indispensable for us that we can change the color of an event,
without using css. Our user's have to be able to change the color of an event themselves and that's only possible if we're not limited by css.
We would consider to sponsor this feature

I'm referring to smartclient version "v8.3p_2013-04-03"

Regards Marcus

[Isomorphic]

Thanks for the comments. These have been forwarded on to the dev team for discussion. We'll follow up when we have more information

Regards
Isomorphic Software

[MarcusZ]

Hi,
i've found a grave bug in the timeline. I'm setting the height of each lane to 30, so i'll be able to show more lanes without scrolling.
The timeline seems to know which lanes will be shown and only draws the calendarEvents for these lanes. The problem is that the calculation of the visible lanes takes only the default height of the lanes into account and not the defined height.
The result is that, i can see all lanes without scrolling, but not every event will be drawn.

This component is an importent part of a workflow from our product, so we would appreciate it if you could fix this asap.

Here is a code example, so you can see the result for yourself.

var developers = [
    { name: "P1", title: "Person1", height: 30},
    { name: "P2", title: "Person2", height: 30 },
    { name: "P3", title: "Person3" , height: 30},
    { name: "P4", title: "Person4" , height: 30},
    { name: "P5", title: "Person5" , height: 30},
    { name: "P6", title: "Person6" , height: 30},
    { name: "P7", title: "Person7" , height: 30},
    { name: "P8", title: "Person8" , height: 30},
    { name: "P9", title: "Person9" , height: 30},
    { name: "P10", title: "Person10" , height: 30},
    { name: "P11", title: "Person11" , height: 30},
    { name: "P12", title: "Person12" , height: 30},
    { name: "P13", title: "Person13" , height: 30},
    { name: "P14", title: "Person14" , height: 30},
    { name: "P15", title: "Person15" , height: 30},
    { name: "P16", title: "Person16" , height: 30},
];
var _today = isc.DateUtil.getStartOf(new Date(2012, 6, 5), "W");

var _start = _today.getDate() - _today.getDay();
var _month = _today.getMonth();
var _year = _today.getFullYear();


var events = [

{
    eventId: 1, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P1"
},
{
    eventId: 2, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P2"
},
{
    eventId: 3, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P3"
},
{
    eventId: 4, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P4"
},
{
    eventId: 5, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P5"
},
{
    eventId: 6, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P6"
},
{
    eventId: 7, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P7"
},
{
    eventId: 8, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P8"
},
{
    eventId: 9, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P9"
},
{
    eventId: 10, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P10"
},
{
    eventId: 11,
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P11"
},
{
    eventId: 12,
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P12"
},
{
    eventId: 13, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P13"
},
{
    eventId: 14, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P14"
},
{
    eventId: 15, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P15"
},
{
    eventId: 16, 
    name: "Event",
    description: "Timeline event",
    startDate: new Date(_year, _month, _start + 2),
    endDate: isc.DateUtil.getEndOf(new Date(_year, _month, _start + 8), "D"),
    lane: "P16"
},

];



var _calStart = isc.DateUtil.getStartOf(new Date(2012, 6, 5), "W");
var _calEnd = _calStart.duplicate();
_calEnd.setDate(_calEnd.getDate() + 20);

isc.Timeline.create({
    ID: "timeline", 
    height: "80%",
    startDate: _calStart, 
    endDate: _calEnd,
    data: events,
    lanes: developers,
    headerLevels: [ { unit: "week" }, { unit: "day" } ],
    canResizeTimelineEvents: true,
    canEditLane: true,
    showEventDescriptions: false,
    labelColumnWidth: 120
});

I'm using smartClient version "v8.3p_2013-04-12"

Regards
Marcus

[Isomorphic]

This is fixed and will hit tomorrow's nightly builds.

Your other requests above are also underway - we'll update here when there is more information.