Demo

This example shows a timeline with three rows of data, a temporal range, and a focused interval applied.

Interactive Example
Month
Jan 2020
  • Test Collection With A Really Really Really Super Long Name

  • Test Collection 2

  • Test Collection 3

Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul

<EDSCTimeline
  data={[
    {
      id: 'row1',
      title: 'Test Collection With A Really Really Really Super Long Name',
      intervals: [
        [
          new Date('2019-08-12').getTime(),
          new Date('2019-12-20').getTime()
        ],
        [
          new Date('2020-01-04').getTime(),
          new Date('2020-05-20').getTime()
        ]
      ]
    },
    {
      id: 'row2',
      title: 'Test Collection 2',
      color: '#3498DB',
      intervals: [
        [
          new Date('2019-07-01').getTime(),
          new Date('2021-12-20').getTime()
        ]
      ]
    },
    {
      id: 'row3',
      title: 'Test Collection 3',
      color: '#dc3545',
      intervals: [
        [
          new Date('2019-07-12').getTime(),
          new Date('2019-07-13').getTime()
        ],
        [
          new Date('2021-01-01').getTime(),
          new Date('2021-01-02').getTime()
        ]
      ]
    }
  ]}
  center={new Date('2020-01-01T03:12:58.000Z').getTime()}
  focusedInterval={{
    start: new Date('2020-01-01T00:00:00.000Z').getTime(),
    end: new Date('2020-01-31T23:59:59.999Z').getTime()
  }}
  temporalRange={{
    start: new Date('2020-01').getTime(),
    end: new Date('2020-03-15').getTime()
  }}
/>

When callback functions are defined, the timeline provides them values that represent its current position, zoom, and ranges. See the README.md in the @edsc/timeline repository for more information about the callback functions.

Center & Zoom
Center:Thu, 01 Jan 1970 00:00:00 GMT
Zoom: (null)
Timeline Range
Start:undefined
End:undefined
Temporal Range
Start: 2020-01-01T00:00:00.000Z
End: 2020-03-15T00:00:00.000Z
Focused Range
Start: 2020-01-01T00:00:00.000Z
End: 2020-01-31T23:59:59.999Z