> ## Documentation Index
> Fetch the complete documentation index at: https://docs.8space.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline View

> Visualize project schedules with Gantt-style timeline bars, manage dependencies, and adjust dates with drag-and-drop

The Timeline view provides a Gantt-chart-style visualization of your project schedule, showing tasks as horizontal bars positioned across a calendar. You can see task durations, identify conflicts in dependencies, and adjust schedules by dragging bars directly on the timeline.

## Timeline Layout

The Timeline view is divided into three main areas:

<CardGroup cols={3}>
  <Card title="Task List" icon="list">
    Left pane showing task names and due dates in a scrollable list.
  </Card>

  <Card title="Calendar Grid" icon="calendar-days">
    Center area displaying days/weeks as columns with month headers above.
  </Card>

  <Card title="Task Bars" icon="minus">
    Colored bars overlaid on the calendar showing task duration and position.
  </Card>
</CardGroup>

## Time Scale Toggle

Switch between two viewing scales using the toggle in the top-right corner:

<Tabs>
  <Tab title="Week 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
  </Tab>

  <Tab title="Month Scale">
    Each calendar column represents one day with narrower spacing (20px). This scale is ideal for:

    * Long-term planning (multiple months)
    * High-level project overview
    * Seeing more timeline in one view
  </Tab>
</Tabs>

The calendar automatically calculates the date range based on your tasks, adding padding before the earliest start and after the latest end.

## 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

<Note>
  Tasks without start or due dates won't appear on the timeline. Add dates to tasks in the Backlog or Board view first.
</Note>

## 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

<Tip>
  Use milestones to mark sprint ends, release dates, or major project gates.
</Tip>

## Drag-and-Drop Scheduling

The Timeline view supports three types of drag operations to adjust task schedules:

<AccordionGroup>
  <Accordion title="Move Task" icon="arrows-up-down-left-right">
    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.
  </Accordion>

  <Accordion title="Resize Start Date" icon="arrow-left">
    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.
  </Accordion>

  <Accordion title="Resize End Date" icon="arrow-right">
    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.
  </Accordion>
</AccordionGroup>

<Warning>
  Drag-and-drop scheduling is only available to users with **Editor** or **Owner** roles. Viewers can see the timeline but cannot adjust dates.
</Warning>

### 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

<Card title="Resolving Conflicts" icon="wrench">
  To resolve a dependency conflict:

  1. Drag the successor task to start after the predecessor ends
  2. Or extend the predecessor's end date to finish earlier
  3. Or remove the dependency if it's no longer valid
</Card>

## Dependency Editor

The footer area contains a dependency editor for creating task relationships:

<Steps>
  <Step title="Select successor task">
    Use the dropdown to choose the task that depends on another (the successor).
  </Step>

  <Step title="Set predecessor">
    Click **Set first available predecessor** to automatically link it to the first task in your list (excluding itself).
  </Step>

  <Step title="Review the link">
    The dependency line appears immediately on the timeline, color-coded for conflicts.
  </Step>
</Steps>

<Info>
  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.
</Info>

## 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)

<Tip>
  The task list scrolls independently from the timeline, so you can keep task names visible while scrolling through dates.
</Tip>

## 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

But cannot:

* 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

<CardGroup cols={2}>
  <Card title="Set Realistic Dates" icon="calendar-check">
    Ensure all tasks have both start and due dates that reflect actual work estimates for accurate timeline visualization.
  </Card>

  <Card title="Review Dependencies" icon="link">
    Regularly check for red conflict indicators and resolve them by adjusting task dates or rethinking dependencies.
  </Card>

  <Card title="Use Both Scales" icon="magnifying-glass">
    Switch between week and month views to balance detail (week) with overview (month) as needed.
  </Card>

  <Card title="Mark Key Dates" icon="diamond">
    Use milestones for important deadlines, sprint boundaries, or release dates to make them stand out visually.
  </Card>
</CardGroup>

## 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