how to change timezone of Timeline widget


Does anybody know how to change the timezone of the Timeline widget?

FYI, it defaults to UTC, and not my local timezone. I need it (time axis and time display) to be in GMT +10. Any ideas?

Found a way by overriding these functions:

Any cleaner way to do this?

Currently that’s the only way. It would be nice to combine them so that it doesn’t have to be done separately for the Animation and Timeline widgets. Maybe both widgets could use a single ViewModel? The timeline could benefit from knowing things like play/pause state etc.


I see, thanks Ed!

I have an application where the time that is loaded via KML is already in UTC but the timeline takes this time and adds 5hrs to it.
I need this to read the time as it is written in the KML nodes.

Any tips or should I just add 5hrs to the time?

This sounds like it might be a KML bug. Would you be able to put together a sample KML file that reproduces the problem?



This KML file when loaded displays outages for ground radar. The times are in UTC format. If you view any of the nodes that have the description “Outage from 2017-02-15 at 21:38:24 to 2017-02-15 at 21:41:24 GMT” you will see that the times are the same.

These times don’t show up this way for this type of KML.



outages-6hrs.kml (208 KB)

I think the problem is with your time values. Your ISO 8601 strings don’t designate a time zone.
You need to change 2017-02-15T21:40:24 to 2017-02-15T21:40:24Z

The Z signifies UTC.



Thanks for that!

Hi Paulri,
Do you perhaps have a sample of coding on how to change the timezone to SST using the functions(animationviewmodel.dateformatter, animation.viewmodel.timeformatter and timeline.makelabel…

I am having trouble on how to perform this… please help me … thank you…

my code is found below…


var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.animation.viewModel.dateFormatter = localeDateTimeFormatter;
viewer.animation.viewModel.timeFormatter = localeTimeFormatter;
viewer.timeline.makeLabel = function(time) { return localeDateTimeFormatter(time); }

It's probably wrong code sample.
Timeline widget DOM label direct change.

// use jQuery library
\('\.cesium\-timeline\-ticLabel'\)\.each\(function\(i\) \{     var str = "08:17:39";     (this).html(str);