Timeline View

Time to read: 7 minutes

Visualize your roadmap as an interactive Gantt chart with dates, progress, and dependencies.

What You'll Learn

• Displaying timeline view
• Understanding view modes
• Navigating dates
• Reading timeline bars
• Configuring timeline settings

What is Timeline View?

Visual Planning

Timeline view shows your roadmap items on a calendar-based chart:

• Horizontal bars - Each item is a bar
• Length - Shows duration (start to target date)
• Position - Shows when work happens
• Color - Indicates status
• Progress - Visual completion percentage

When to Use Timeline

Great for:

• Visual project planning
• Seeing what's coming when
• Identifying overlaps
• Tracking progress over time
• Presenting to stakeholders

Not ideal for:

• Items without dates
• Very long-term planning (years)
• Items without clear timelines

Displaying Timeline

Basic Timeline

Use the timeline template:

[roadmap product="main" template="timeline"]

Timeline with Product

Show specific product timeline:

[roadmap product="mobile-app" template="timeline"]

Create Timeline Page

1. Pages > Add New
2. Title: "Development Timeline"
3. Add shortcode:

   [roadmap product="main" template="timeline"]

4. Publish page

Users can now view visual timeline!

View Modes

Timeline has 5 different time scales:

Day View

Shows: Hourly breakdown

Use for: Current day planning

Timeline: 24 hours

Shows items scheduled today with hourly precision.

Week View

Shows: Daily breakdown

Use for: Weekly sprint planning

Timeline: 7 days

Shows items scheduled this week, one column per day.

Month View (Default)

Shows: Daily grid

Use for: Monthly planning

Timeline: Full month

Shows items for the month, each day visible.

Quarter View

Shows: Weekly overview

Use for: Quarterly planning

Timeline: 3 months

Shows items for the quarter, grouped by week.

Year View

Shows: Monthly overview

Use for: Annual planning

Timeline: 12 months

Shows items for the year, one column per month.

Timeline Controls

View Selector Buttons

Located: Top of timeline

Options: Day | Week | Month | Quarter | Year

To switch views:

1. Click desired view button
2. Active view highlights
3. Timeline redraws
4. Data updates

Navigation Arrows

Located: Timeline header

Arrows: ← Previous | Next →

Navigate time:

• Day view: Previous/next day
• Week view: Previous/next week
• Month view: Previous/next month
• Quarter view: Previous/next quarter
• Year view: Previous/next year

Click arrow, timeline shifts.

Current Date Display

Located: Between navigation arrows

Shows: Current visible date range

Examples:

• Day: "January 15, 2024"
• Week: "Jan 15 - Jan 21, 2024"
• Month: "January 2024"
• Quarter: "Q1 2024"
• Year: "2024"

Reading the Timeline

Timeline Bars

Each roadmap item appears as a bar:

Bar Length:

• Start: Start date (or target date)
• End: Target date (or end date)
• Length = Duration

Bar Position:

• Vertical: One item per row
• Horizontal: Time position

Bar Color:

• Matches item status color
• Planned = Blue
• In Progress = Yellow
• Completed = Green
• Etc.

Item Information

On the bar:

• Item title
• Progress bar (if enabled)
• Assignee avatar (if enabled)

On hover:

• Full item title
• Dates
• Status
• Progress percentage

On click:

• Opens item details (if configured)
• Or navigates to item page

Progress Bars

If enabled, items show progress:

• Green fill inside bar
• Width = completion percentage
• Updates when progress changes

Example:

• 0% progress: Empty bar
• 50% progress: Half filled
• 100% progress: Fully filled

Assignee Information

If enabled, shows:

• Avatar image - Profile picture
• Name - On hover
• Position - Next to title

Helps identify who's working on what.

Date Headers

Top row of timeline:

• Shows dates for current view
• Format varies by view mode
• Helps locate items in time

Examples:

• Day view: Hours (9 AM, 10 AM...)
• Week view: Days (Mon, Tue, Wed...)
• Month view: Dates (1, 2, 3...)
• Year view: Months (Jan, Feb, Mar...)

Dependencies

Shows relationships between items:

Visual connections:

• Lines connecting dependent items
• Shows what blocks what
• Helps identify critical path

Example:

"Mobile UI" depends on "API Ready"

→ Line connects the two bars

Use for:

• Understanding blockers
• Sequencing work
• Project planning

Timeline Settings

Enabling Timeline

1. Roadmap > Settings
2. Pro Features tab
3. Check ☑ Enable Timeline View
4. Click Save Settings

Timeline template now works!

Display Options

Show Weekends

• Include Saturday/Sunday
• Or hide for cleaner view
• Default: Show

Show Dependencies

• Draw lines between items
• Visual relationships
• Default: Show

Show Progress

• Display progress bars
• Green fill indication
• Default: Show

Show Assignees

• Display avatars
• Show who's responsible
• Default: Show

Configuring Settings

1. Roadmap > Settings
2. Pro Features tab
3. Find Timeline Settings
4. Toggle options on/off
5. Click Save Settings

Changes apply immediately to all timelines.

Working with Dates

Setting Item Dates

For items to appear on timeline:

Required:

• Target date (minimum)

Optional:

• Start date (beginning of work)
• End date (actual completion)

Edit item:

1. Roadmap > All Items
2. Click item title
3. Find Target Date field
4. Select date from calendar
5. Optionally set Start Date
6. Click Update

Item now appears on timeline!

Date Ranges

If only target date set:

• Bar shows at target date
• Default duration (1 day or week)

If start and target date set:

• Bar spans from start to target
• Shows full duration
• More accurate timeline

If end date set:

• Shows actual completion date
• Useful for completed items
• Track estimates vs. actuals

Date Formatting

Dates use WordPress date format:

Change format:

1. Settings > General
2. Date Format
3. Select format
4. Timeline updates automatically

Use Cases

Sprint Planning

Week view:

1. Switch to Week view
2. See all items this week
3. Check for overload
4. Adjust schedules

Release Planning

Quarter view:

1. Switch to Quarter view
2. See Q1 roadmap
3. Group by themes
4. Plan releases

Stakeholder Presentations

Month or Quarter view:

1. Professional visual
2. Easy to understand
3. Shows progress clearly
4. Export as screenshot

Team Coordination

Day or Week view:

1. See who's working on what
2. Identify conflicts
3. Balance workload
4. Daily standups

Long-term Planning

Year view:

1. Annual roadmap
2. Major milestones
3. Strategic planning
4. Executive reviews

Best Practices

Setting Realistic Dates

Do:

• Add buffer time
• Consider dependencies
• Account for testing
• Update when delayed

Don't:

• Set aggressive dates
• Ignore dependencies
• Forget to update
• Over-promise

Organizing the Timeline

Keep it clean:

• Limit concurrent items
• Group related work
• Sequence logically
• Use dependencies

Update regularly:

• Move completed items
• Adjust dates if delayed
• Update progress weekly
• Keep status current

Using with Team

Communication:

• Share timeline link
• Review in meetings
• Discuss blockers
• Celebrate completions

Collaboration:

• Assign owners
• Set clear deadlines
• Track dependencies
• Update progress

Combining with Other Views

Multiple Pages

Board view page:

[roadmap product="main" template="board"]

For kanban view.

Timeline page:

[roadmap product="main" template="timeline"]

For schedule view.

Switch between: Add links between pages.

Tabbed Interface

Use tabs to switch views:

Tab 1: Board

Tab 2: Timeline

Tab 3: List

(Requires custom implementation or theme support)

Troubleshooting

Timeline Not Showing

Check settings:

• Timeline view enabled?
• Roadmap > Settings > Pro Features
• Enable Timeline View

Check shortcode:

• Correct: template="timeline"
• Case-sensitive
• In quotes

Check browser:

• JavaScript enabled?
• Console errors? (F12)
• Try different browser

Items Not Appearing

Check dates:

• Items have target dates?
• Dates in visible range?
• Navigate to correct period

Check product:

• Items assigned to product?
• Correct product in shortcode?
• Verify in admin

Timeline Performance

For many items:

• Filter by status
• Limit date range
• Use month/quarter view
• Enable caching

Slow loading:

• Reduce items shown
• Optimize images
• Enable caching plugin

Dates Wrong

Check WordPress timezone:

1. Settings > General
2. Timezone
3. Set correctly
4. Clear cache

Check date format:

• Settings > General > Date Format
• Use standard format
• Save changes

Advanced Features

Filtering Timeline

Show only specific items:

[roadmap product="main" template="timeline" status="in-progress"]

Only in-progress items on timeline.

Sorting Timeline

Order items:

[roadmap product="main" template="timeline" orderby="priority"]

High priority at top.

Custom Date Ranges

Use parameters:

[roadmap product="main" template="timeline" date_from="2024-01-01" date_to="2024-12-31"]

Shows only items in that range.

Keyboard Shortcuts

Navigate timeline faster:

• ← - Previous period
• → - Next period
• D - Switch to Day view
• W - Switch to Week view
• M - Switch to Month view
• Q - Switch to Quarter view
• Y - Switch to Year view

(If implemented in your version)

Next Steps

• Import/Export - Bulk manage timeline items
• Drag & Drop - Visual item management
• Analytics Dashboard - Track timeline progress

← Multi-Product | Import/Export →

Updated on: 25/09/2025