Ga naar hoofdinhoud

Timeline View

The Timeline view presents your items on a horizontal time axis, similar to a Gantt chart. Use it for planning work over time, visualizing dependencies, and tracking milestones.

Layout​

The timeline is split into two synchronized panels:

  • The left panel lists items grouped by their groups. Each group has a colored header with the group name and expand/collapse controls.
  • The right panel shows a scrollable horizontal time axis with bars representing each item's date range. Both panels scroll vertically in sync.
  • Items without start or end dates appear in an Unscheduled section in the left panel but not on the timeline grid.

Setting Dates​

Each item needs a start date and end date (from a Date or Timeline column) to appear as a bar on the timeline:

  • Drag the edges of a bar to adjust start or end dates.
  • Drag the entire bar to shift both dates simultaneously.
  • Click on an empty area in the timeline row to create a new date range.
  • Double-click a bar to open the item detail panel and edit dates precisely.

The timeline automatically detects Date and Timeline type columns from your board. Timeline columns store { start, end } date pairs, while Date columns provide a single point.

Time Scale​

Switch between different time scales using the controls above the timeline:

  • Day — detailed view for short-term planning. Each column is one day.
  • Week — default view showing one to several weeks. Each column is one week.
  • Month — overview for medium-term planning. Each column is one month.
  • Quarter — high-level view for roadmap planning. Each column spans three months.

The default time window spans 3 months centered around the current date.

Time Axis Details​

The time axis header displays:

  • Month labels at the top level for month and quarter zoom levels.
  • Day or week labels at the lower level, depending on the current zoom.
  • Weekend shading — Saturday and Sunday columns are displayed with a subtle background color to visually separate working days from weekends.

Item Bars​

Each item bar is colored using its group color, making it easy to identify which group an item belongs to at a glance. The bar width corresponds to the date range duration.

Hovering over a bar reveals a tooltip with the item name and exact date range. Clicking a bar opens the Item Detail Panel.

Dependencies​

Create dependencies between items to show which tasks must be completed before others can begin:

  1. Hover over an item bar to reveal the dependency handle (small circle on the right edge).
  2. Drag from the handle to another item to create a finish-to-start dependency.
  3. Dependency arrows are displayed between connected items.
  4. If a predecessor's end date changes, dependent items are highlighted with a warning if their dates conflict.

Milestones​

Mark an item as a milestone to display it as a diamond shape instead of a bar:

  1. Open the item detail panel.
  2. Toggle the Milestone flag.
  3. Milestones use a single date rather than a date range.

Today Line​

A vertical red line indicates the current date, making it easy to see what is overdue (to the left) and what is upcoming (to the right). The today line updates automatically each day.

Zooming and Scrolling​

  • Use the scroll wheel to scroll the timeline horizontally.
  • Hold Ctrl / Cmd and scroll to zoom in or out between time scales.
  • Click Today in the toolbar to center the viewport on the current date.
  • The zoom range spans from Day (most detailed) to Quarter (most overview).

Empty and Error States​

  • No items — a centered message indicates that items need date columns to appear on the timeline.
  • Loading — a skeleton loader mimics the two-panel layout while data is being fetched.
  • Error — an error state with a Retry button appears if the data fails to load.
Unscheduled items

Items without date values appear in the left panel under an "Unscheduled" section. This gives you visibility into work that still needs date assignments without losing it from the view entirely.

Troubleshooting​

ProblemSolution
Items not appearing as barsEnsure items have values in a Date or Timeline column. Items without dates only appear in the left panel.
Bars overlappingZoom into a more detailed time scale (Day or Week) to spread items apart.
Today line not visibleUse the Today button to center the viewport on the current date.

Data Source​

The timeline view shares the same boards.getByProjectId tRPC query as the Board, Table, and Calendar views. Items are fetched once and displayed based on their date/timeline column values. Changes in other views are reflected when you switch to the timeline.

Left Panel Details​

The left panel displays items grouped by their board groups. Each group has:

  • A colored header showing the group name.
  • An expand/collapse toggle for showing or hiding items.
  • Item names listed below the header, each in its own row aligned with the corresponding timeline bar.

Click an item name in the left panel to open the Item Detail Panel for editing.

Date Extraction Logic​

The timeline view detects dates from two column types:

  1. Timeline columns — the preferred source, containing { start, end } date pairs stored as JSONB. Both start and end dates are used to render the bar.
  2. Date columns — used as a fallback when no timeline column exists. A single date is treated as a point event (narrow bar).

Items without any date information appear in the "Unscheduled" section of the left panel.

Best Practices​

  • Use Timeline columns instead of plain Date columns when you need start and end dates for accurate bar rendering.
  • Color-code your groups to make it visually clear which team or category each item belongs to.
  • Set dependencies for sequential tasks to make scheduling conflicts visible immediately.
  • Use the Quarter zoom for executive-level roadmap reviews and the Day zoom for detailed sprint planning.
  • Review the Unscheduled section regularly to identify items that need date assignments.

Next Steps​