Timeline events are offset

brooksie · 03 Jun 2013, 23:50

In the showcase http://fractalsoft.net/primeext-showcas ... tRange.jsf timeline example demonstrating limits, the event "First" is coded in the bean to start at 00:00:00, but is showing up in the timeline at 01:00:00. I don't understand why. Can anyone explain please? The Primefaces Schedule component has an issue #3837 with ignoring daylight savings offset - is this the same? Thanks.

FYI: I'm based in the UK and running at GMT+1. Using Firefox 21.0.

Oleg · 04 Jun 2013, 09:51

Hi,

It's simple. This example doesn't use the "timeZone" attribute. That means, the TimeZone.getDefault() is used as the user local time zone and you see the time difference. TimeZone.getDefault() returns the server time zone and it is German because the server is in Germany. It only makes sence if you're in Germany too. See the documentation of the "timeZone":

User time zone to convert start / end dates for displaying. Time zone is useful because dates are normally stored in UTC on the server-side, but should be displayed in browser in user local time zone. The attribute can be either a String or TimeZone object. If no time zone is provided, the used time zone is TimeZone.getDefault().

You should always define a time zone because normally you save the dates in UTC (in DB or whatever) and show them in UI in the user time zone.

brooksie · 04 Jun 2013, 23:20

Hi Oleg,
Apologies, but I think I must still be missing something

. The events are created in the bean without specifying a timezone. The local timezone is implicit in the Calendar.getInstance(). cal.getTime() converts to UTC. The bean runs on the same server, so must also pick up the german timezone. Why, then, do I see an offset when the event is both created and displayed in the same timezone? I see the same offset happening when everything is local on my PC. Event "first" is at 00:00 Germany (summer) time, which is 22:00 UTC, which should convert back to 00:00 when displaying the timeline. But it shows up at 01:00.

Thanks for your patience explaining the fault in my logic.

Oleg · 05 Jun 2013, 09:15

When you create a Date in bean it should be UTC. Dates are normally srored in DB in UTC. So, simple create them in UTC and provide a user local time zone for the "timeZone" attribute. The component will convert then the UTC time to the local time for UI automatically.

Code: Select all

Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("UTC"));
cal.setTimeInMillis(...);  // load and set UTC time from DB

Date start = ca.getTime();  // start date

TimeZone timeZone = TimeZone.getTimeZone("Europe/Madrid");  // user specific time zone for UI

brooksie · 08 Jun 2013, 12:48

I still think that events are shown offset on the timeline when daylight saving is in place. The attached example illustrates it. Daylight saving in Europe started on March 31 this year (2013). I've created two events, one on 30-March, one on 31-March, both for 8am. When I calculate the difference in UTC milliseconds, it correctly gives 23 hours. I've set the event text to be the start time. I display the timeline using the same timezone (everything is explicitly set to Paris time). The first event on 30-March shows up on the timeline correctly at 8am, but the second event on 31-March, after daylight saving has started, shows up in the timeline at 9am even though the text says 8am.
The timeline axis correctly misses out the 1am-2am hour, so my conclusion is that the problem is the calculation that positions the second event on the timeline - it seems to assume 24hours/day instead of allowing for a 23 hour day as daylight saving starts.
Unfortunately my limited knowledge of writing components doesn't allow me to debug this further, but I hope this information helps you to quickly identify the problem area.

https://docs.google.com/file/d/0Bz3ZCNZ ... sp=sharing

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:pfe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:outputText  value="#{timelineBean.milliseconds1}" />
        &nbsp;
        <h:outputText  value="#{timelineBean.milliseconds2}" />
        &nbsp;
        <h:outputText  value="delta hours: #{(timelineBean.milliseconds2 - timelineBean.milliseconds1)/3600000}" />
        <br/>
        <pfe:timeline value="#{timelineBean.timelineModel}" 
                      var="meeting" 
                      timeZone="Europe/Paris"
                      >
            <h:outputText value="#{meeting}" >
                <f:convertDateTime type="time" timeStyle="full" timeZone="Europe/Paris" />
            </h:outputText>
        </pfe:timeline>

    </h:body>
</html>

Code: Select all

@ManagedBean
@ViewScoped
public class TimelineBean implements Serializable {

    private TimelineModel timelineModel;
    private long milliseconds1 = 0;
    private long milliseconds2 = 0;

    public TimelineBean() {
    }

    @PostConstruct
    protected void init() {
        timelineModel = new TimelineModel();
        TimelineEvent event;
        Calendar cal;
        Date startDate;
        Date endDate;

        cal = Calendar.getInstance(TimeZone.getTimeZone("Europe/Paris")); 
        cal.set(2013, Calendar.MARCH, 30, 8, 0, 0);
        cal.set(Calendar.MILLISECOND, 0);
        startDate = cal.getTime();
        milliseconds1 = startDate.getTime();
        cal.add(Calendar.HOUR_OF_DAY, 12);
        endDate = cal.getTime();
        event = new TimelineEvent(startDate, startDate, endDate);
        timelineModel.add(event);

        cal = Calendar.getInstance(TimeZone.getTimeZone("Europe/Paris"));
        cal.set(2013, Calendar.MARCH, 31, 8, 0, 0);
        cal.set(Calendar.MILLISECOND, 0);
        startDate = cal.getTime();
        milliseconds2 = startDate.getTime();
        cal.add(Calendar.HOUR_OF_DAY, 12);
        endDate = cal.getTime();
        event = new TimelineEvent(startDate, startDate, endDate);
        timelineModel.add(event);
    }

    public TimelineModel getTimelineModel() {
        return timelineModel;
    }

    public long getMilliseconds1() {
        return milliseconds1;
    }

    public long getMilliseconds2() {
        return milliseconds2;
    }
}

Oleg · 08 Jun 2013, 13:52

Hi,

Thanks for explanation. I don't have much experience in daylight time. What I wrote was this conversion from UTC to local and vice versa https://github.com/primefaces-extension ... Utils.java Please provide a patch if you can fix this. Feel free to send a pull request.

Many thanks in advance.

mkoch · 17 Jul 2013, 13:23

I had the same problem. I used UTC in my Events and set the TimeZone attribute to UTC, but the events were still displayed with a 2 hour error.

The problem was that my browser was set to a different TimeZone. The TimelineRenderer hands the Date values as "new Date(milliseconds)" to timeline.js
But the browser interprets the milliseconds in "new Date(milliseconds)" as UTC milliseconds, and then converts the time to my local timezone when displaying.
But I wanted them to display as is, no conversion whatsoever.
So I overrode the TimelineRenderer to supply the Dates as "new Date("yyyy-MM-dd HH:mm")" to the Browser. That way, the Browser doesn't convert the Dates.

Code: Select all

public class TimelineRenderer extends org.primefaces.extensions.component.timeline.TimelineRenderer {

    DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");

    private String encodeDate(Calendar calendar, TimeZone localTimeZone, Date utcDate) {
        Date localDate = new Date(DateUtils.toLocalDate(calendar, localTimeZone, utcDate));
        return "new Date(\"" + dateFormat.format(localDate) + "\")";
    }

...

Oleg · 17 Jul 2013, 16:20

That is something new for me. Browser doesn't convert UTC dates to your local dates. Date can be only in UTC. On both side - server-side Date as well client-side Date object. What the Timeline component does - it converts the UTC Date to the user locale Date according to the provided TimeZone. The converted (shifted) millisec. are displayed in the browser then, so that the Browser shows the user local Date. What is wrong in this approach?

Edit: All conversions are in DateUtils.java, so if you have a patch, you're welcome. But I can not see at the moment how I can improve the conversion. It seems to be worked fine for me.

Jeneryx · 14 Jul 2014, 17:34

Is there a plan to allow the client to show the timeline events in UTC? For some international websites, working in UTC is a legitimate request. For example I work in the Space industry and everyone communicates using the UTC time. For now I've taken a copy of primefaces extensions to enable this (hard coded the timezone for quickness to get round this), but enabling this for other users seems a desirable feature.

kukeltje · 15 Jul 2014, 08:48

As Oleg wrote above:

Oleg wrote:Edit: All conversions are in DateUtils.java, so if you have a patch, you're welcome. But I can not see at the moment how I can improve the conversion. It seems to be worked fine for me.

Timeline events are offset

Who is online