Timeline Layout
The Timeline view is divided into three main areas:Task List
Left pane showing task names and due dates in a scrollable list.
Calendar Grid
Center area displaying days/weeks as columns with month headers above.
Task Bars
Colored bars overlaid on the calendar showing task duration and position.
Time Scale Toggle
Switch between two viewing scales using the toggle in the top-right corner:- Week Scale
- Month Scale
Each calendar column represents one day with wider spacing (36px). This scale is ideal for:
- Short-term planning (1-4 weeks)
- Detailed day-by-day scheduling
- Precise date adjustments
Task Bars
Tasks with start and due dates appear as horizontal bars on the timeline:- Bar position: Determined by the task’s start date
- Bar width: Represents the duration from start date to due date (inclusive)
- Bar color: Orange by default, red border when in conflict
- Bar label: Task title is visible when there’s enough space
Tasks without start or due dates won’t appear on the timeline. Add dates to tasks in the Backlog or Board view first.
Milestones
Tasks marked as milestones display differently:- Appear as diamond shapes instead of bars
- Rotated 45 degrees for visual distinction
- Positioned at their due date
- Useful for marking key project deadlines or deliverables
Drag-and-Drop Scheduling
The Timeline view supports three types of drag operations to adjust task schedules:Move Task
Move Task
Click and drag the center of a task bar to move the entire task to different dates. Both start and due dates shift by the same number of days.Use case: Reschedule a task without changing its duration.
Resize Start Date
Resize Start Date
Click and drag the left edge of a task bar to adjust the start date while keeping the due date fixed.Use case: Start a task earlier or later without affecting the deadline.
Resize End Date
Resize End Date
Click and drag the right edge of a task bar to adjust the due date while keeping the start date fixed.Use case: Extend or shorten a task’s timeline from its current start.
Drag Constraints
When resizing task bars:- The start date cannot be moved past the due date
- The due date cannot be moved before the start date
- Dates snap to full days (no partial days)
Task Dependencies
The Timeline view visualizes dependencies between tasks as arrow lines:- Lines connect from the end of a predecessor task to the start of a successor task
- Arrow heads point to the successor (dependent) task
- Finish-to-Start (FS) is the only dependency type supported
- Gray lines: Normal dependencies
- Red lines: Dependencies with conflicts
Dependency Conflicts
A dependency conflict occurs when a successor task starts before its predecessor ends. Conflicted tasks show:- Red ring around the task bar
- Red dependency lines
- Highlighted in the task list
Resolving Conflicts
To resolve a dependency conflict:
- Drag the successor task to start after the predecessor ends
- Or extend the predecessor’s end date to finish earlier
- Or remove the dependency if it’s no longer valid
Dependency Editor
The footer area contains a dependency editor for creating task relationships:Set predecessor
Click Set first available predecessor to automatically link it to the first task in your list (excluding itself).
The current dependency editor sets the first task as the predecessor. For more complex dependency setups, you may need to adjust multiple tasks or use a more advanced dependency management approach.
Calendar Features
Month Headers
The top row shows month and year labels, with each label spanning the appropriate number of days in that month. This helps orient you within the timeline.Day Headers
The second row shows individual days with abbreviated day names (Mon, Tue, etc.) and day numbers.Weekend Highlighting
Weekends (Saturday and Sunday) have a subtle background tint to differentiate them from weekdays, helping you plan around working days.Today Indicator
The current day is highlighted with an orange-tinted background column, making it easy to see where you are in the project schedule.Task List Panel
The left panel shows:- Task name: Truncated if too long
- Due date: Formatted as “MMM d” (e.g., “Mar 15”) or ”—” if no due date
- Delete button: Appears on hover (for editors/owners)
Viewer Mode
Users with Viewer role can:- See the full timeline and task bars
- View dependencies and conflicts
- Switch between week and month scales
- Scroll through the timeline
- Drag task bars to adjust dates
- Create or edit dependencies
- Delete tasks
Empty State
If no tasks have dates set, you’ll see a message: “Add tasks with dates to render timeline bars.” Go to the Backlog or Board view to create tasks with start and due dates, then return to the Timeline view to see them visualized.Best Practices
Set Realistic Dates
Ensure all tasks have both start and due dates that reflect actual work estimates for accurate timeline visualization.
Review Dependencies
Regularly check for red conflict indicators and resolve them by adjusting task dates or rethinking dependencies.
Use Both Scales
Switch between week and month views to balance detail (week) with overview (month) as needed.
Mark Key Dates
Use milestones for important deadlines, sprint boundaries, or release dates to make them stand out visually.
Keyboard and Mouse Tips
- Scroll horizontally: Use your trackpad, mouse wheel, or scroll bar to move through time
- Scroll vertically: Navigate through the task list when you have many tasks
- Drag precision: The timeline snaps to day boundaries, making it easy to align tasks precisely