@fqqb/timeline

TimeRuler

A band showing time scale indications.

The following examples force a specific scale. If no scale is specified, a scale is selected automatically based on the visible time range and available width.

const start = new Date();
start.setHours(0, 0, 0, 0);
const stop = new Date(start.getTime());
stop.setDate(stop.getDate() + 1);

timeline.setViewRange(start.getTime(), stop.getTime());

const line = new TimeRuler(timeline);
line.label = 'Time';
line.scale = 'hour';

const start = new Date();
start.setHours(0, 0, 0, 0);
const stop = new Date(start.getTime());
stop.setDate(stop.getDate() + 21);

timeline.setViewRange(start.getTime(), stop.getTime());

const line = new TimeRuler(timeline);
line.label = 'Time';
line.scale = 'weekDay';

const start = new Date();
start.setHours(0, 0, 0, 0);
const stop = new Date(start.getTime());
stop.setDate(stop.getDate() + 400);

timeline.setViewRange(start.getTime(), stop.getTime());

const line = new TimeRuler(timeline);
line.label = 'Time';
line.scale = 'month';

Timezones

let line = new TimeRuler(timeline);
line.label = 'New York';
line.timezone = 'America/New_York';

line = new TimeRuler(timeline);
line.label = 'London';
line.timezone = 'Europe/London';

line = new TimeRuler(timeline);
line.label = 'Tokyo';
line.timezone = 'Asia/Tokyo';

Drawables