Plan
Tasks on a timeline per team, with a baseline, milestones, dependencies and the conflicts between them.
1 demo
Tasks on a timeline per team, with a baseline, milestones, dependencies and the conflicts between them.
Build one like it
The smallest complete version, in each language CanopyX supports for this view. The demo above is the same API with more data.
using CanopyX;
using CanopyX.Html;
var start = new DateTime(2026, 11, 2, 0, 0, 0, DateTimeKind.Utc);
var plan = new CanopyDataGridView("rollout", "Rollout plan") { Noun = "tasks" };
plan.Columns.Add(new CanopyColumn("title", "Task") { RowHeader = true });
plan.Columns.Add(new CanopyColumn("starts", "Start") {
Kind = CanopyColumnKind.DateTime
});
plan.Columns.Add(new CanopyColumn("ends", "Finish") {
Kind = CanopyColumnKind.DateTime
});
plan.Columns.Add(new CanopyColumn("team", "Team"));
plan.Columns.Add(new CanopyColumn("planStart", "Baseline start") {
Kind = CanopyColumnKind.DateTime
});
plan.Columns.Add(new CanopyColumn("planEnd", "Baseline finish") {
Kind = CanopyColumnKind.DateTime
});
var teams = new CanopyTreeView("teams", "Teams");
teams.Columns.Add(new CanopyColumn("name", "Team"));
teams.Roots.Add(new CanopyNode("platform", "Platform"));
teams.Roots.Add(new CanopyNode("validation", "Validation"));
plan.Calendar = new CanopyCalendar("starts") {
End = "ends",
Title = "title",
Resource = "team",
Resources = new CanopyCalendarResources(teams),
View = CanopyCalendarView.Timeline,
Date = start,
Span = new CanopyCalendarSpan(10, CanopyCalendarSpanUnit.Day)
};
plan.Calendar.Views.Add(CanopyCalendarView.Timeline);
plan.Plan = new CanopyPlan {
BaselineStart = "planStart",
BaselineEnd = "planEnd"
};
foreach (var (id, title, team, day, days) in new[] {
("prepare", "Prepare the hosts", "platform", 0, 2),
("move", "Move the workloads", "platform", 2, 3),
("verify", "Verify the workloads", "validation", 5, 2)
}) {
var row = new CanopyGridRow(id);
row.Cells["title"] = title;
row.Cells["team"] = team;
row.Cells["starts"] = start.AddDays(day);
row.Cells["ends"] = start.AddDays(day + days);
row.Cells["planStart"] = start.AddDays(day - 1);
row.Cells["planEnd"] = start.AddDays(day + days - 1);
plan.Rows.Add(row);
}
plan.Plan.Dependencies.Add(new CanopyPlanDependency("prepare", "move"));
plan.Plan.Dependencies.Add(new CanopyPlanDependency("move", "verify"));
plan.SaveHtmlPage("plan.html");Run this snippet (plan, C#)Its output, generated with the site.
Try this in the demo
- Baseline
Compare a task bar with the grey line under it.
The line is the baseline, so a task that slipped shows how far it moved.
- Dependencies
Follow the arrows from Prepare migration.
Each arrow joins a task to the one that waits for it; a link whose dates clash is marked as a conflict.
- Zoom
Switch Days to Weeks in the toolbar.
The same tasks fit a longer span, with today still marked.