Page type

Gantt: a task table becomes a schedule.

This schedule runs in the sample app, published on the Online Test. It has 14 tasks from a CRM rollout, with phases, subtasks, progress and owner, all read from a regular table.

A CRM rollout in three months

On the left are the phases, each with its subtasks. On the right, the bars with progress, the red today line and a minimap. The footer summarizes the project: 14 tasks, 48% average progress.

Gantt chart of the Mini CRM rollout, with phases, subtasks, owners and progress — The rollout fits in three months, with phases that expand and collapse, progress on each bar and the current-day line.

The task fields and the list columns

You point to the table and the name, start, end, parent task and progress fields. Then you choose the columns of the side list. The rest comes ready.

resources/views/…blade.php

<mad-ganttmodel="ProjetoTarefa"name-field="nome" start-field="inicio" end-field="fim"parent-field="parent_id" progress-field="progresso"color-field="cor" owner-field="responsavel"order-by="ordem" interval="90"striped-rows show-minimap><mad-gantt-column field="name"     label="Task"  width="300" tree /><mad-gantt-column field="owner"    label="Owner" width="150" /><mad-gantt-column field="progress" label="%"     width="70" align="center" /></mad-gantt>

Five zoom levels, from hours to years

You see the project by hour, day, week, month or year. Search for a task with ⌘K, jump back to today with a button and highlight the critical path with one click.

The same Gantt schedule at week zoom, with the name and percentage inside each bar — The same schedule at week zoom, with the time ruler running from W28 to W35.

When to use the Gantt

Use the Gantt when the work has a start, an end and an order, and a delay in one task pushes the others. It shows the deadline for the whole project and where it can slip.

System rollout. As in this example, phases with subtasks, owners and progress.
Construction and renovation. Stages that depend on each other, with working days and holidays marked on the schedule.
Product launch. The critical path shows which delays change the final date.
Made-to-order production. The workload panel shows who has too many hours in a day.

If tasks don't depend on each other and only each one's stage matters, the kanban is simpler. For appointments with a day and time, use the calendar. The Gantt is built in the visual editor, with dependencies, critical path and baseline.

What you configure

Besides the task fields, the schedule has attributes for planning and for the working calendar.

Dependencies <mad-gantt-dependencies>: The table that links tasks, with the four link types (finish-to-start, start-to-start, finish-to-finish and start-to-finish) and a lag between them.
Rescheduling auto-schedule: When you move a task, the ones that depend on it move along.
Critical path critical-path: Highlights in red the tasks with no slack, the ones that delay the project if they slip.
Baseline <mad-gantt-baseline>: Provides each task's planned start and end, so you can compare planned against actual.
Working days working-days: The days that count as work, Monday to Friday by default. Each holiday goes in as a date (<mad-gantt-holiday>).
Zoom and window zoom: The zoom the schedule opens at, day by default. interval sets how many days show initially, 90 in this example.

What goes into the Laravel project

The Gantt comes as a pair, the schedule and the task form, each with its own class in app/Control and its own Blade view. The schedule talks to your PHP like this:

Each gesture calls a method of yours. The schedule notifies the screen when someone clicks a task (on-task-click), moves or stretches a bar (on-task-update) or creates a dependency (on-dependency-create).
Header buttons. <mad-gantt-header-action> puts a button at the top of the schedule that calls a PHP method, such as onAddTask, or opens another screen.
The tree comes from a field. Phases and subtasks come from the parent task field (parent-field), and the column marked tree expands and collapses each phase in the side list.

Like every MadBuilder screen, these files open in your editor, go into your Git and accept hand-written code in protected blocks, which stay there when the screen is regenerated. See how the code is generated.

Questions about the Gantt

Does the Gantt work with my task table?

It works with a regular table. You point to the name, start and end fields and, as in this example, the parent task, progress, color and owner fields. Dependencies live in a separate table.

Can I edit a task without leaving the Gantt?

Yes. A double-click on a cell in the side list edits it right there. And clicking a task can open the task form, which comes bundled with this page type.

Does the Gantt show who is overloaded?

Yes, if you turn on the workload panel. From an allocations table with task, person and hours, it draws each owner's hours per day below the schedule and highlights overload.

And more

Arrows linking tasks that depend on each otherMoving a task pushes the ones that depend on itCritical path highlightedComparison between planned and actualPanel with each resource's workloadDouble-click in the side list to edit in placeYour PHP code runs when someone moves, stretches or links tasks

See also the Timeline or the page types.

Create an account, build a screen, download the project.

No scheduled demo, no discovery call. If the Laravel that comes out doesn’t pass your team’s review, you lost an afternoon.

Try the app now See the generated code

Create an accountOpen beta, no credit card.
Build a screenVisually, in code, or by asking the AI.
Download the .zipA Laravel project that runs wherever you want.