# Timeline The Timeline display is the right choice when you have time-based records — projects, tasks, bookings, events, content schedules — and you want to see them plotted over a continuous time axis. Timeline supports two **layout types**: a **Gantt** layout (with dependencies, the default) and a **Stacked** layout (records auto-stack into lanes only when they overlap). You pick which one to use from the Layout type setting in the view's Editor.
## Layout types You choose between two layouts from the Timeline setup in the Editor. ### Gantt (default) The Gantt layout is best when you need to show **how records relate to each other** — for example, project tasks where one task blocks another, or phases that have to finish before the next can start. Dependencies are turned on by default with the Gantt layout. * Records appear in their own row in the sidebar (one record per lane) * Dependency lines connect related records * Drag handles let you change the start, end and dependency of a record ### Stacked The Stacked layout is best when you just want to **fit a lot of records into the smallest possible vertical space** — content calendars, booking schedules, room availability, capacity views. * No sidebar by default — records stack directly on the canvas * Records sit on a single lane and only spill into additional lanes when they overlap in time * Dependencies still exist but are not drawn on the canvas * Jump-to controls (left/right arrows) help you navigate to records that are off-screen ## Setting up a Timeline view The Timeline Editor sidebar gives you everything you need to configure how records are plotted, grouped, styled and edited. ### Layout type Switch between **Gantt** (default) and **Stacked**. See [Layout types](#layout-types) above for guidance on which to pick. ### Start date & End date Pick the date or date-time fields that represent when each record starts and ends. * If you only pick a Start date, the record's duration defaults to one hour for date-time fields, or one day for date-only fields. * Both field types behave differently around timezones — see [Date formats](#date-formats) below. ### Title The field whose value labels each record on the timeline — usually the record's name. Picking the right title field makes it easier to identify records when their bars are short. ### Default scale The zoom level the timeline opens on. Available scales: * **Year** — months across, days as 4px ticks * **Quarter** — months across, days as 12px ticks * **Month** — days across, 40px per day * **Week** — days across, 120px per day * **Day** — hours across, 60px per hour Users can change between scales from the action bar, but Default scale controls what they see first. ### Date visibility Choose which days appear on the timeline: * **All days** (default) — show every day of the week. * **Workdays** — hide weekends. The labels adapt to locale, so users in regions with a Sunday–Thursday workweek see those days instead of Monday–Friday. When you switch to Workdays, the **Avoid weekends** sub-option in [Dependencies](#dependencies) is turned on automatically so date shifting respects the workweek. ### Grouping Group records into swim lanes by one or more fields. Grouping is multi-level, so you can group by Client, then by Project, then by Phase, and the sidebar will render the nested hierarchy with the right indentation. * If a grouping field is a Single Option or Multiple Option, the lane uses that option's color * Groups can be expanded and collapsed from the sidebar * All other field types use a neutral background ### Record style Controls the color of each record's button on the canvas. This replaces the older "color comes from the first grouping" behavior — you now pick exactly where the color comes from. * **Neutral** (default) — white button, accent color on hover and selection * **Color badge** — a small colored badge on the left of each record, sourced from the field you choose * **Color button** — the whole record button is filled with the source field's color Pick any Single Option or Multiple Option field on the record as the color source. If the table has no compatible field, the colored options are disabled with a tooltip explaining that a single-select field is required. ### Milestones Turn on Milestones to plot point-in-time markers (e.g. "Design review", "Go-live") alongside your records. Milestones come from a separate related table linked to each record. The Milestones settings include: * **Toggle** to show or hide milestones * **Linked record field** that points to the milestones table — or a button to create a new Milestones table and linked record field directly from the dropdown if you haven't built one yet * **Title field** — the milestone's label * **Date field** — when the milestone is plotted Milestones appear on the canvas as diamond markers anchored to the milestone's date. Users can create milestones from the sidebar or from a record's card footer, drag them to reschedule, and right-click to rename, change date, or delete. ### Dependencies Available on the Gantt layout. Turn on Dependencies to draw connecting lines between records and to control how dates shift when a record moves. The Dependencies settings include: * **Toggle** to enable dependencies (auto-on when Layout type is set to Gantt) * **Linked record field** that defines the dependency relationship — or a button to create one called "Dependency" directly from the dropdown * **Relationship direction** — `Blocking` (default) or `Blocked by` * **Date shifting** — what happens to dependent records when you move a record: * **Shift when dates overlap only** — only push successors out when they would otherwise overlap * **Shift and maintain time between records** — keep the gap between records constant, moving the whole chain together * **Don't shift automatically** — let invalid overlaps appear in red so the user decides what to fix * **Avoid weekends** — when shifting dates, skip Saturday/Sunday (or the local equivalent) so tasks never start or end on a weekend Invalid dependencies — a successor scheduled before its predecessor, or a dependency loop — appear as red dotted lines so they can't be missed. ### Record card / On-click action What happens when a user clicks a record on the canvas: * **Open card** — opens a compact record card in the bottom-right of the timeline. The card shows the fields you've selected in the Fields tab, an "Open" CTA at the top to jump to the full record, and a footer with action buttons and "Add milestone" (when those features are enabled). If a record has many actions, they're grouped under an Actions menu. * **Open record** — opens the full record view immediately * **Nothing** — the click is a no-op ### Filters and sorting The action bar above the timeline lets users filter and sort the records they see, exactly like other view displays. The available fields are controlled in the view's Filters and Sort tabs. ## How to set it up 1. Open the view → Build mode → **Layout** → **Timeline**. 2. Pick a **Layout type** (Gantt or Stacked). 3. Set the **Start date** and **End date** fields. 4. Choose the **Title** field that labels each record. 5. Set a **Default scale** (Year, Quarter, Month, Week, Day). 6. Optionally adjust **Date visibility** to Workdays if weekends shouldn't appear. 7. Add **Grouping** to create swim lanes. 8. Configure **Record style** so records take their color from a status, type or priority field. 9. Turn on **Milestones** and/or **Dependencies** if you need them. 10. Pick what happens when a user clicks a record under **On-click action**. Test with real data: check that durations look right, that grouping makes sense, that dependencies behave the way you expect when you drag a record, and that the timezone behavior matches what users expect. ## Using the Timeline ### Action bar At the top of every Timeline view, users get an action bar with: * **Zoom level** — Year / Quarter / Month / Week / Day, with keyboard shortcuts `Y`, `Q`, `M`, `W`, `D` * **Horizontal scroll arrows** — for users without a trackpad; one arrow jump moves by the visible range * **Sidebar toggle** — hide the sidebar to give the timeline more horizontal room * **Filters & sort** * **Visible range indicator** — shows the months (e.g. `Sep – Oct 2026`) or days (e.g. `Thu 2 – Mon 12 Jan 2026`) currently in view, adapting as the user scrolls ### Sidebar The sidebar lists every record and group lane on the left. When it's hidden, the canvas takes over the full width and group label badges plus jump-to arrows appear in its place so users can still navigate to records that are off-screen. ### Today / Now indicator The current day is highlighted with an accent-colored badge and a full-day background tint. On the Day scale, a live `hh:mm` line shows the current time. ### Drag to reschedule Hovering a record shows drag handles on its left and right edges. Dragging changes the start or end date — with a date badge that follows the cursor and adapts to the active zoom (date for Year/Quarter/Week, time for Day, date + time for Day if the drag crosses a day boundary). The time format respects the user's locale (24-hour vs 12-hour). ### Dependencies on the canvas In the Gantt layout, hovering a record also reveals **dependency handles** next to the drag handles. Drag from a handle to another record to create a dependency. Right-click a dependency line to open a contextual menu where you can invert the direction, delete the dependency, or jump to either record. Invalid dependencies are drawn in red. ### Milestones on the canvas Diamond markers appear at the milestone's date. Click a milestone to keep its date and title visible, drag it to reschedule, or right-click to rename, change date or delete. Add new milestones from the sidebar or from the footer of a record's card. ### Mobile The Timeline view adapts on mobile — the action bar collapses, the sidebar behaves contextually, and zoom levels are tuned for smaller screens so you can still scrub through a project plan from a phone. ## Date formats How Noloco displays a record depends on whether your Start/End fields include a time. ### Date-time fields If your field has a date **and** a time, Noloco shows the record in the user's local timezone (unless you've configured otherwise). If you don't supply an End date, the record defaults to one hour long. Good fits: * Meetings that start and end at specific times * Bookings that start and end at specific times ### Date-only fields If your field has only a date, Noloco treats records as all-day events using the date as-is, ignoring the user's timezone. Good fits: * Birthdays * Multi-day events such as conferences * Single-day events with no specific start or end time ### Mixing date-time fields with all-day events If you need to display both timed and all-day events on the same Timeline, it can be tricky to get timezones right — but it's possible. Because you need start and end **times** for the timed records, you'll use a date-time field. To tell Noloco that a particular record is an all-day event regardless of timezone, **set its start to midnight UTC** (not your local midnight). For example, an event meant to happen on February 1st should be stored as `1st Feb 00:00` UTC, or as the ISO string `2023-02-01T00:00:00.000Z`. For a single-day all-day event, set the end date to the same value. For a multi-day all-day event, set the end date to the last day at `00:00` UTC. Sample data mixing both styles: | Name | Start | End | | --------------------------- | ---------------- | ---------------- | | Multiple days — non all-day | 03/02/2023 00:00 | 04/02/2023 11:30 | | Starts at midnight | 03/02/2023 00:00 | 03/02/2023 05:00 | | Multiple days | 01/02/2023 00:00 | 04/02/2023 00:00 | | All day 1 | 02/02/2023 00:00 | 02/02/2023 00:00 | | All day 2 | 03/02/2023 00:00 | 03/02/2023 00:00 | | Two hours long | 05/02/2023 14:00 | 05/02/2023 16:00 | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://guides.noloco.io/views/display/timeline.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.