0

Timeline ignores both default and custom time zones, it always resorts to UTC

asked 2012-05-28 15:35:05 +0800

cvarona gravatar image cvarona
554 1 6

Hi,

it's being impossible for me to make occur events displayed on a timeline display dates in either my default timezone (CEST right now) or a custom timezone. It always shows them as UTC.

Just try

<zk>
    <timeline height="300px" width="100%">
        <bandinfo width="70%" id="b1" intervalUnit="month" intervalPixels="100" />
        <bandinfo id="b2" width="30%" intervalUnit="year" intervalPixels="200" syncWith="b1" />
    </timeline>
    <button label="Add CEST occur event" onClick="addCESTOccurEvent();" />
    <zscript>
import org.zkforge.timeline.data.OccurEvent;
import java.util.*;

TimeZone cest = TimeZone.getTimeZone( "CEST" );

b1.setTimeZone( cest );
b2.setTimeZone( cest );

int cnt = 0;

void addCESTOccurEvent() {
    OccurEvent oe = new OccurEvent();
    oe.setText( "Event " + cnt++ );
    oe.setStart( new GregorianCalendar( cest ).getTime() );
    b1.addOccurEvent( oe );
}
    </zscript>
</zk>

in the onlike zksandbox.

With kind regards

César Varona

on

delete flag offensive retag edit

4 Replies

Sort by » oldest newest

answered 2012-05-31 09:51:05 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi César,

I tried it and if I change the "CEST" to "GMT+3" the time is changed,
what is the "It always shows them as UTC." mean?

Regards,
Ben

link publish delete flag offensive edit

answered 2012-06-04 10:04:53 +0800

cvarona gravatar image cvarona
554 1 6

Hi Ben,

it means that the dates displayed on the bubbles when I click on the events are always UTC times, however the server's timezone is or whichever time zone I set up on the timeline. In other words: I would like to read 12:00 CEST and not 10:00 GMT, even if both times are the same.

With kind regards

César Varona

link publish delete flag offensive edit

answered 2012-06-05 03:50:27 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2012-06-05 04:00:42 +0800

Hi Cesar,

There is no easy way to change the TimeZone of displayed dates, you may try override the displayed value as follows:

<zk xmlns:w="client">
            ...
        <bandinfo width="70%" id="b1" intervalUnit="month" intervalPixels="100">
            <attribute w:name="bind_"><![CDATA[
                function() {
                    if (Timeline.OriginalEventPainter.prototype._showBubble) {
                        var old_sb = Timeline.OriginalEventPainter.prototype._showBubble;
                        Timeline.OriginalEventPainter.prototype._showBubble = function (x, y, evt) {
                            old_sb.apply(this, arguments);
                            var bubbles = jq('.timeline-event-bubble-time:contains(GMT)');
                            for (var i = 0; i < bubbles.length; i++) {
                                var date = new Date(bubbles<i >.innerHTML),
                                    newDate = new Date(date.getTime() + 1000*60*60*2);
                                    bubbles<i >.innerHTML = newDate.toUTCString().replace('GMT', 'CEST');
                                }
                            };
                        }
                        this.$bind_();
                    }
                ]]></attribute>
        </bandinfo>
            ...
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-06-05 07:22:19 +0800

cvarona gravatar image cvarona
554 1 6

Hi Ben,

it's not easy indeed. I've spent some days trying to figure out how to override the method that renders the date as text with no success. Your method does perfectly, I've only modified it like this:

<attribute w:name="bind_"><![CDATA[
                function() {
                    if (Timeline.OriginalEventPainter.prototype._showBubble) {
                        var old_sb = Timeline.OriginalEventPainter.prototype._showBubble;
                        Timeline.OriginalEventPainter.prototype._showBubble = function (x, y, evt) {
                            old_sb.apply(this, arguments);
                            var bubbles = jq('.timeline-event-bubble-time:contains(GMT)');
                            for (var i = 0; i < bubbles.length; i++) {
                                var date = new Date(bubbles<i >.innerHTML),
                                    newDate = new Date(date.getTime() + 1000*60*60*2);
                                    bubbles<i >.innerHTML = newDate.toLocaleString();
                                }
                            };
                        }
                        this.$bind_();
                    }
                ]]></attribute>

Thanx a lot for your reply.

César Varona

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2012-05-28 15:35:05 +0800

Seen: 231 times

Last updated: Jun 05 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More