<bmx-gantt>

<bmx-gantt
  label="Office move"
  project-start="2026-03-02"
  holidays="2026-04-03,2026-04-06"
  editable
  show-baselines
  tasks='[
    {"id":"p","name":"Planning"},
    {"id":"p1","parentId":"p","name":"Survey the new site","duration":3,"progress":100},
    {"id":"p2","parentId":"p","name":"Agree the floor plan","duration":4,"progress":60,"baselineStart":"2026-03-04","baselineFinish":"2026-03-09"},
    {"id":"p3","parentId":"p","name":"Plan signed off","milestone":true},
    {"id":"f","name":"Fit-out"},
    {"id":"f1","parentId":"f","name":"Network cabling","duration":6,"progress":20},
    {"id":"f2","parentId":"f","name":"Furniture delivery","duration":2},
    {"id":"f3","parentId":"f","name":"Meeting rooms AV","duration":5},
    {"id":"m","name":"Move"},
    {"id":"m1","parentId":"m","name":"Pack","duration":3},
    {"id":"m2","parentId":"m","name":"Move day","duration":1},
    {"id":"go","name":"Open for business","milestone":true}
  ]'
  links='[
    {"from":"p1","to":"p2"},{"from":"p2","to":"p3"},{"from":"p3","to":"f1"},
    {"from":"p3","to":"f2","lag":2},{"from":"f1","to":"f3","type":"SS","lag":2},
    {"from":"f","to":"m"},{"from":"m1","to":"m2"},{"from":"m2","to":"go"}
  ]'
></bmx-gantt>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>The dates are worked out, not typed.</strong> Each task has a duration and links; the chart schedules
    them against the working calendar &mdash; weekends and the two holidays here &mdash; and draws the tasks with no
    room to slip as the critical path. Drag a bar, its end or its progress grip, or draw a link from the dot at a
    bar's end to another bar, and everything that depends on it moves with it.
  </span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>Every edit is a cancelable event.</strong> <code>bmxTaskChange</code> and <code>bmxLinkChange</code>
    carry the whole list as it would be; call <code>preventDefault()</code> to refuse one, or set
    <code>apply-changes="false"</code> and assign the lists yourself. <code>canChange</code> refuses a drag while it
    is still in the reader's hand.
  </span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>Tab into the task list once, then use the keyboard.</strong> The arrows move between rows,
    <kbd>&rarr;</kbd> and <kbd>&larr;</kbd> open and close a summary, <kbd>F2</kbd> edits a cell,
    <kbd>Shift</kbd>+<kbd>&rarr;</kbd> moves a task a working day and <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>&rarr;</kbd>
    lengthens it. Links are typed in the Predecessors column &mdash; <code>2, 3SS+1</code> &mdash; so nothing the
    pointer can do needs a pointer.
  </span>
</div>