blatui

Components

Scheduler

A week / day agenda that positions events in time slots.

php artisan blatui:add scheduler
Time
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Standup

9 AM – 9:30 AM

from 9 AM – 9:30 AM

Design review

11 AM – 12:30 PM

from 11 AM – 12:30 PM

Lunch & learn

12 PM – 1 PM

from 12 PM – 1 PM

1:1 with Sam

10 AM – 10:45 AM

from 10 AM – 10:45 AM

Sprint planning

2 PM – 4 PM

from 2 PM – 4 PM

Demo day

3:30 PM – 5 PM

from 3:30 PM – 5 PM

Retro

9:30 AM – 10:30 AM

from 9:30 AM – 10:30 AM 
<x-ui.scheduler
    :start-hour="8"
    :end-hour="18"
    :events="[
        ['title' => 'Standup',        'day' => 0, 'start' => '09:00', 'end' => '09:30', 'color' => 'sky'],
        ['title' => 'Design review',  'day' => 0, 'start' => '11:00', 'end' => '12:30'],
        ['title' => 'Lunch & learn',  'day' => 1, 'start' => '12:00', 'end' => '13:00', 'color' => 'emerald'],
        ['title' => '1:1 with Sam',   'day' => 2, 'start' => '10:00', 'end' => '10:45', 'color' => 'amber'],
        ['title' => 'Sprint planning','day' => 3, 'start' => '14:00', 'end' => '16:00', 'color' => 'violet'],
        ['title' => 'Demo day',       'day' => 4, 'start' => '15:30', 'end' => '17:00', 'color' => 'rose'],
        ['title' => 'Retro',          'day' => 4, 'start' => '09:30', 'end' => '10:30'],
    ]"
/>

Day

Time
Wednesday

Inbox & triage

8:30 AM – 9 AM

from 8:30 AM – 9 AM

Pairing session

9 AM – 10:30 AM

from 9 AM – 10:30 AM

Coffee chat

10:30 AM – 11 AM

from 10:30 AM – 11 AM

Focus block

11 AM – 12:30 PM

from 11 AM – 12:30 PM

Lunch

12:30 PM – 1:30 PM

from 12:30 PM – 1:30 PM

Client call

2 PM – 3 PM

from 2 PM – 3 PM

Wrap-up notes

4 PM – 4:30 PM

from 4 PM – 4:30 PM 
<x-ui.scheduler
    view="day"
    :days="['Wednesday']"
    :start-hour="8"
    :end-hour="17"
    label="Wednesday schedule"
    class="max-w-md"
    :events="[
        ['title' => 'Inbox & triage',  'day' => 0, 'start' => '08:30', 'end' => '09:00', 'color' => 'sky'],
        ['title' => 'Pairing session', 'day' => 0, 'start' => '09:00', 'end' => '10:30'],
        ['title' => 'Coffee chat',     'day' => 0, 'start' => '10:30', 'end' => '11:00', 'color' => 'amber'],
        ['title' => 'Focus block',     'day' => 0, 'start' => '11:00', 'end' => '12:30', 'color' => 'violet'],
        ['title' => 'Lunch',           'day' => 0, 'start' => '12:30', 'end' => '13:30', 'color' => 'emerald'],
        ['title' => 'Client call',     'day' => 0, 'start' => '14:00', 'end' => '15:00', 'color' => 'rose'],
        ['title' => 'Wrap-up notes',   'day' => 0, 'start' => '16:00', 'end' => '16:30'],
    ]"
/>

API Reference

Props, slots and exposed methods for <x-ui.scheduler>.

Props

Prop Type Default Description
events* array [] The events to place on the grid. Each event is positioned by its day column and start/end time; overlapping events in a column split into side-by-side lanes. See Each event below.
days string[] — Column header labels. Defaults to Mon–Sun in week view, or a single "Day" column in day view.
startHour int 8 First hour shown in the time gutter (0–24). Events before this are clamped or dropped.
endHour int 18 Last hour shown in the time gutter (0–24), clamped to at least startHour + 1.
view string 'week' Layout mode. In day view a date maps to the single column; in week view dates map to their weekday.
week day
label string 'Schedule' Accessible name for the scrollable grid region.

* Required.

Each event

Prop Type Default Description
title string 'Event' The event label shown in the block and read out as its accessible name.
day int|string — Which column the event belongs to: an integer 0-based index, or a "YYYY-MM-DD" date mapped to its weekday (week view) or column 0 (day view).
start* string — Start time as "HH:MM" (24-hour). Events with an unparseable or non-positive duration are dropped.
end* string — End time as "HH:MM" (24-hour). Must be later than start.
color string — Tone for the event block. When omitted, a per-column tone is assigned so adjacent events stay distinct.
primary sky emerald amber violet rose