Using timeline for a workday (for working hours only)

[miskolczi.peter]

SNAPSHOT_v9.0d_2013-05-28/PowerEdition Deployment (built 2013-05-28)

We are working on a daily view with the timeline component, but we have some problems and need your help.

In our scenario we would like to show events for working hours for a given day only (we always get and put the events to the timeline control for that day only as it changes), and here are the points we need advice.

1. This code doesn't seem to work for timeline (it does work for calendar) We don't really need it, just having 1.a is a good solution for us.

timeline.setWorkdayStart("6:00am");
timeline.setWorkdayEnd("8:00pm");
timeline.setScrollToWorkday(true);

1.a Specifying the visible range using timeline.setTimelineRange would work for us, but then we need to be able override the prev/next button to move one day back and forth. (We tried but it steps now the length of the defined range (actually 14 hours))

So either scrolling to the working hours (with or without highlighting) or moving prev/next with a day is OK.

2. We want to show only a day in the date label (with name of the day) (like we requested in http://forums.smartclient.com/showthread.php?t=26762 will check once it will be available later today)
Hope the same method is wrapped for range. Will update this thread if it is needed to be added too.

3. Is there any way to change the header format? We would like to show the same time formats for calendar and timeline view (vertically and horizontally) The following code has no effect (still displays 14:00 instead of 2:00pm. (we have DAY and HOUR header))

timeline.setTimeFormatter(TimeDisplayFormat.TOSHORTTIME);

4. We use the date (getVisibleStartDate) from the timeline for querying the events. The very first time (while the component is empty) we get the following exception trying to get the current date (and the same for the ancestor calendar):

(TypeError) @com.smartgwt.client.widgets.calendar.Calendar::getVisibleStartDate()([]): Unable to get property 'getField' of undefined or null reference
...
at com.smartgwt.client.widgets.calendar.Calendar.getVisibleStartDate(Calendar.java)

5. Not sure why, but using DateChangedHandler which loads and puts the new set of events doesn't seem to work. All the code runs OK but we can not see the events. Using scheduleDeferred command for the refresh resolves the problem. Just wanted to let you know.

Sorry for the count of the points (this order is also our priority), but they needs to be resolved to have the best solution. Thank you!

[miskolczi.peter]

4. Still occurs, when the date range is predefined.

timeline.setTimelineRange(tlStartDate, tlEndDate);

[Isomorphic]

1) workday attributes are not currently supported for Timelines. However....

1a) In this case, you can setColumnsPerPage(24) - that will cause the visible window (of 14 hour columns) to scroll by 24 hour columns

3) There is an API, HeaderLevel.titleFormatter, which exists in SmartClient but is not yet wrapped for SmartGWT - we'll add that in the course of other ehancements

4) We'll fix this

5) Can you show some data details? For example, how are you getting the data (is the timeline databound, eg?) and what are you doing in the dataChanged handler?

[miskolczi.peter]

1) It is working :-), thanks for your quickest response!

5) We just use plain events and add them with setData(CalendarEvent[] data). Will try to create a smaller test environment where the problem still exists.

[miskolczi.peter]

Having the nice daily move showed another problem.

6) Sunday is disabled. Cannot choose it (eg.: Jun 9) from the date picker but still available when using prev/next buttons. Screen shot is also attached.

timeline.setShowWeekends(false);
timeline.setWorkdays(new int[]{1,2,3,4,5,6});

[miskolczi.peter]

7) You can see minor text rendering problems in the date picker control in the previous screen shot.

"We" replaced with "..." and "Can..." instead of "Cancel".

This is with TreeFrog with IE 10 in comparability mode. With Chrome (Version 27.0.1453.94 m) all the date names are "..." except Friday.

[Isomorphic]

4 should be fixed, 5 we're not seeing (need a testcase), 6 is fixed and we've made changes to address 7 - bear in mind that the Enterprise series of skins is more modern and support CSS3-mode.

Please retest with a build dated June 9

[miskolczi.peter]

Permanent issue with calendar.getVisibleStartDate()

SNAPSHOT_v9.0d_2013-06-09/PowerEdition Deployment (built 2013-06-09)

Wanted to check new build, but this error comes up when querying the visible start date:

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) @com.smartgwt.client.widgets.calendar.Calendar::getVisibleStartDate()([]): 'selectdView' is undefined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:249)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:571)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:279)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.smartgwt.client.widgets.calendar.Calendar.getVisibleStartDate(Calendar.java)

Please advise.

[Isomorphic]

There was a typo that caused that regression, it's been fixed for tomorrow's builds.

In the meantime, can you show some code that demonstrates how (and *when*) you're calling getVisibleStartDate() so that we can test here?

[miskolczi.peter]

I have tried to create a small environment, but because of the typo it errors out with the simplest test case (see below).

Our flow is the following in brief:
a. get date range (from calendar visible start/end )
b. get data based on dates and create events array
c. set data using calendar.setData(events);

As the calendar date changes (DateChangedHandler) we repeat a-b-c.

Will recheck with the next build and create test code as needed.

final Calendar calendar = new Calendar();
CalendarEvent events[] = ...;
		
calendar.setData(events);
		
Button bRefresh = new Button();
bRefresh.addClickHandler(new ClickHandler() {
     @Override
     public void onClick(ClickEvent event) {
          System.out.println(calendar.getVisibleStartDate());
     }
});

[miskolczi.peter]

SNAPSHOT_v9.0d_2013-06-09/PowerEdition Deployment (built 2013-06-09)

6) Still able to reach Sunday with Next/Prev buttons in Timeline even though it (Sunday) is not visible in the Date Chooser. Next/Prev buttons should skip days are not available, shouldn't they?

[Isomorphic]

There is no provision for physically *removing* intermittent sections of the timeline, ie, for not showing portions of it at all - timelines represent a contiguous passage of time. Such that, if your timeline shows a 2 week period, you should not be able to create events on those non-workdays by clicking on them.

That's what we fixed yesterday.

On your question about Next and Previous buttons... Timelines are not day-centric - the range is changing by an amount which you are specifying (24 columns) - so if you're already manipulating the range dates to force a 14-column working day, but skip by 24 columns, why don't you just skip another 24 columns if the day you're about to show is not a workday?

[miskolczi.peter]

OK. Thank you for that fix.

Removing intermittent sections is not needed for us, we only show the working hours for one day.

Prev/Next - will go that way (handle it on our own).

[Isomorphic]

To clarify the situation with post #12 in this thread - there are no visible start and end dates until the grid has been built and the calendar is visible - we'll look at the JS error, but it will likely still return null pre-draw() - if you haven't already tried it, then try just call draw() on your timeline before calling getVisibleStartDate().

[miskolczi.peter]

SmartGWT 4.0d (v9.0d_2013-06-13/PowerEdition Deployment (built 2013-06-13))

3) Wrapping HeaderLevel.titleFormatter is still in progress, correct? (I can't see it)

5) Actually seems to be fixed, no ScheduleDeferred is needed.

All the other issues have been resolved. Thank you.

But there is a new problem with the Timeline event styles.
It worked before, but now the size of fonts are randomly change.

8) First time the font is OK, but the positions are not.
Secondly and any time we refresh it, all the positions are OK, but the fonts go to wrong size. See attached screen shots.

(One time the fonts were mixed for one event style)

If you need here is the CSS (the other styles (we have 7 different) have the same structure). As I explored the generated html source for Timeline events only these 2 style names are in use (no ~Body and ~Resizer as the Calendar has/use).

.tl_appointmentStyle,
.tl_appointmentStyleHeader
 {
   font-size:9px;
   background-color: #BCEDAC; 
   border: 1px solid #035F03; 
}

Thank you.