vis-timeline in HTML: inspect dated work without editing the schedule

You need to inspect when work overlaps, not move a milestone accidentally while dragging across the page. Start vis-timeline as a read-only time view, with selection details outside the chart. Keep a plain list of the supplied dates underneath so zooming never hides the only account of the schedule.

Use a fictional three-item production plan: Prepare runs from November 2 to November 4, Review from November 4 to November 6, and a Handoff milestone falls on November 6. These are sample dates, not a real release commitment.

Open the complete example · Download the full HTML source

Define what an interval means

For this example, dates are calendar labels and each end date is an exclusive boundary. Prepare occupies November 2 and 3; Review occupies November 4 and 5. The two ranges touch at a boundary but do not overlap under that stated rule.

That rule belongs to the plan, not to the chart library. If your source uses inclusive end dates, preserve its meaning and adapt the display deliberately. Do not change business dates just to make bars look contiguous.

The vis-timeline documentation describes items with a start and optional end, plus configuration, selection events, and visible-window methods. After loading the standalone browser distribution and its stylesheet, initialize the view:

const items = new vis.DataSet([
  { id: 'prepare', content: 'Prepare',
    start: '2026-11-02', end: '2026-11-04' },
  { id: 'review', content: 'Review',
    start: '2026-11-04', end: '2026-11-06' },
  { id: 'handoff', content: 'Handoff', start: '2026-11-06' }
]);

const timeline = new vis.Timeline(
  document.querySelector('#schedule'), items, {
    editable: false,
    showCurrentTime: false,
    start: '2026-11-01',
    end: '2026-11-08'
  }
);

For an international appointment schedule, use explicit instants and a documented timezone policy instead of this date-only example. Check the library's timezone section against the actual product requirement. A date-only work plan and an appointment at a specific hour need different tests.

Make selection useful outside the bars

Keep a separate source record for each item with its date labels and description. When the timeline emits a select event, use the selected ID to retrieve that record and write the details into a text panel.

The panel for Review should show November 4 to November 6 and the end-exclusive rule. It should not derive a duration from a bar's pixel width. Clear the panel when there is no selected item.

Provide a labeled item selector beside the chart too. It can select the same ID through setSelection() and update the same panel. That gives a reader a direct way to find Handoff even when the visible time window has moved elsewhere.

Separate zoom controls from changes to the plan

A Show full plan button can call setWindow() with the original November 1-8 view. The documented animation: false option makes that change immediate when you want a reproducible comparison. Name the button for the view it restores; it does not roll back source data.

Turning off editing is not a storage system or an approval process. This example has no server, shared update, or submission action. Changes you make to its source HTML belong to a new file version until you deliberately distribute them.

For a simpler vertical reading page, the existing HTML timeline guide avoids the time-axis library. Use this vis-timeline recipe when moving through the scale helps the review. If the reading copy lives in NOS, put the interval rule and original date list with it, and ask reviewers to identify the item ID when requesting a date change.