# Gantt A project timeline (Gantt) chart with task bars positioned by date and progress. - Install: `php artisan blatui:add gantt` - Source: https://blatui.remix-it.com/r/gantt.json - Composer: `composer require gehrisandro/tailwind-merge-laravel` ## resources/views/components/ui/gantt.blade.php ```blade @props([ 'tasks' => [], // [['name' => 'Design', 'start' => '2026-01-01', 'end' => '2026-01-10', 'progress' => 40, 'color' => 'bg-primary'], ...] 'start' => null, // overall range start 'YYYY-MM-DD' (defaults to min task start) 'end' => null, // overall range end 'YYYY-MM-DD' (defaults to max task end) 'unit' => 'day', // header bucket granularity: day | week | month 'today' => null, // override "today" for a stable demo; defaults to the real today ]) @php use Illuminate\Support\Carbon; // ── Normalise tasks ──────────────────────────────────────────────── $rows = []; foreach ($tasks as $t) { if (empty($t['start']) || empty($t['end'])) { continue; } $rows[] = [ 'name' => $t['name'] ?? '', 'start' => Carbon::parse($t['start'])->startOfDay(), 'end' => Carbon::parse($t['end'])->startOfDay(), 'progress' => isset($t['progress']) ? max(0, min(100, (int) $t['progress'])) : null, 'color' => $t['color'] ?? 'bg-primary', ]; } // ── Overall range (inclusive of the end day) ─────────────────────── $rangeStart = $start ? Carbon::parse($start)->startOfDay() : null; $rangeEnd = $end ? Carbon::parse($end)->startOfDay() : null; foreach ($rows as $r) { if (! $rangeStart || $r['start']->lt($rangeStart)) { $rangeStart = $r['start']->copy(); } if (! $rangeEnd || $r['end']->gt($rangeEnd)) { $rangeEnd = $r['end']->copy(); } } // Fallback so the component never divides by zero with no data. $rangeStart ??= Carbon::today(); $rangeEnd ??= $rangeStart->copy()->addDays(7); // Total days the chart spans; +1 so the last day is fully drawn. // diffInDays can be a signed float in modern Carbon — floor to a whole count. $totalDays = max(1, (int) floor($rangeStart->diffInDays($rangeEnd)) + 1); // % of the timeline width occupied by one day — used for bar maths. $dayPct = 100 / $totalDays; // ── Header buckets ───────────────────────────────────────────────── // Each bucket: ['label' => '...', 'days' => N] so its column flexes by duration. $buckets = []; $cursor = $rangeStart->copy(); if ($unit === 'month') { while ($cursor->lte($rangeEnd)) { $bucketEnd = $cursor->copy()->endOfMonth()->startOfDay(); if ($bucketEnd->gt($rangeEnd)) { $bucketEnd = $rangeEnd->copy(); } $buckets[] = ['label' => $cursor->isoFormat('MMM YYYY'), 'days' => (int) floor($cursor->diffInDays($bucketEnd)) + 1]; $cursor = $bucketEnd->copy()->addDay(); } } elseif ($unit === 'week') { while ($cursor->lte($rangeEnd)) { $bucketEnd = $cursor->copy()->addDays(6); if ($bucketEnd->gt($rangeEnd)) { $bucketEnd = $rangeEnd->copy(); } $buckets[] = ['label' => $cursor->isoFormat('MMM D'), 'days' => (int) floor($cursor->diffInDays($bucketEnd)) + 1]; $cursor = $bucketEnd->copy()->addDay(); } } else { // day while ($cursor->lte($rangeEnd)) { $buckets[] = ['label' => $cursor->isoFormat('D'), 'sub' => $cursor->isoFormat('MMM'), 'days' => 1]; $cursor->addDay(); } } // Min px per day keeps long/short ranges legible and triggers horizontal scroll. $minDayPx = $unit === 'day' ? 40 : 16; $timelineMinPx = (int) ($totalDays * $minDayPx); // ── "Today" marker (only when inside the range) ──────────────────── $todayDate = $today ? Carbon::parse($today)->startOfDay() : Carbon::today(); $showToday = $todayDate->betweenIncluded($rangeStart, $rangeEnd); // Offset to the *middle* of today's column so the line reads as "now". $todayPct = $showToday ? ((int) floor($rangeStart->diffInDays($todayDate)) + 0.5) * $dayPct : 0; $labelWidth = '11rem'; // left task-name column @endphp
twMerge('bg-card text-card-foreground w-full overflow-hidden rounded-xl border text-sm') }} >
@foreach ($buckets as $b) @endforeach @forelse ($rows as $r) @php // Bar geometry as % of the timeline area (RTL-safe via logical inset). $barOffset = (int) floor($rangeStart->diffInDays($r['start'])) * $dayPct; $barDays = (int) floor($r['start']->diffInDays($r['end'])) + 1; // inclusive $barWidth = $barDays * $dayPct; $isMilestone = $barDays <= 1; $dateLabel = $r['start']->isoFormat('MMM D') . (($r['start']->isSameDay($r['end'])) ? '' : ' – ' . $r['end']->isoFormat('MMM D')); @endphp @empty @endforelse
Project timeline from {{ $rangeStart->isoFormat('LL') }} to {{ $rangeEnd->isoFormat('LL') }}, {{ count($rows) }} {{ \Illuminate\Support\Str::plural('task', count($rows)) }}.
Task $unit !== 'day', 'text-[11px] leading-tight' => $unit === 'day', ]) style="width: {{ $b['days'] * $dayPct }}%" > @isset($b['sub']) {{ $b['sub'] }} @endisset {{ $b['label'] }}
{{ $r['name'] }}
{{-- subtle grid baseline so bars read against the range --}} {{-- "Today" marker: drawn per-row so it stays aligned with the bars during scroll --}} @if ($showToday) @endif @if ($isMilestone) {{-- 1-day milestone → diamond marker, anchored at the day's centre --}} {{ $r['name'] }}, milestone on {{ $dateLabel }} @else {{-- Bar: a solid colour band (the {{ $color }} token is a literal class, so Tailwind's JIT sees it). The unfilled remainder is dimmed by a neutral overlay, avoiding any runtime-built opacity classes. --}}
{{-- Accessible text: the task name (which also shows in the sticky row header) plus dates / progress, read out as one label. --}} {{ $r['name'] }}, {{ $dateLabel }}@if (! is_null($r['progress'])), {{ $r['progress'] }}% complete @endif @if (! is_null($r['progress'])) {{-- dim the part beyond progress with a neutral scrim so the filled length conveys progress by position, not colour alone --}} {{-- % chip on a contrast-safe neutral backing (AA on any tone) --}} @endif
@endif
No tasks to display.
@if ($showToday && count($rows))
Today · {{ $todayDate->isoFormat('MMM D, YYYY') }}
@endif
```