Laravel Scheduler Component

Pro

Interactive time-grid scheduler with drag-to-move, drag-to-resize, click-to-create, week, day, and month views, and dispatched events for Livewire integration.

A Scheduler built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::scheduler>

Try it live in the docs Get Aura Pro

Installation

composer require bluestarsystem/aura-ui

The Scheduler is part of Aura Pro, installed via your private Composer (Satis) access after purchase. See pricing →

Usage

<x-aura::scheduler
    view="day"
    :date="now()->toDateString()"
    :day-start="8"
    :day-end="18"
    :events="$events"
/>

See the full API, props and live examples in the Scheduler documentation.

Overview

The Scheduler renders a calendar in week (7 columns), day (1 column), or month (full month grid) view. In week/day views, a time-grid covers a configurable range of hours; events are positioned by their start/end datetimes and can be dragged to move, dragged at the bottom edge to resize, or clicked, and empty slots can be clicked or drag-selected to create new events. In month view, events render as chips inside day cells and can be dragged between days.

The scheduler never mutates its events array. Instead, it dispatches browser-level custom events (bubbling, datetime strings in Y-m-d H:i format) that the host Livewire component listens to via #[On(...)], persists the change, and re-passes the updated :events array to re-render.

Props

Prop	Type	Default	Description
`events`	`array`	`[]`	Array of event objects to display. Each entry must have the fields named by the `event*Key` props.
`view`	`'week'\|'day'\|'month'`	`'week'`	Initial view mode. `week` shows 7 columns; `day` shows 1 column; `month` shows a full month grid.
`date`	`string\|null`	`null`	Reference date (`Y-m-d`) for the visible period. Defaults to today when `null`.
`dayStart`	`int`	`8`	First hour shown on the time-grid (0–23).
`dayEnd`	`int`	`20`	Last hour shown on the time-grid. Must be greater than `dayStart`.
`slotMinutes`	`int`	`30`	Duration of each time slot in minutes (minimum 5).
`slotHeight`	`int`	`48`	Pixel height of each time slot row (minimum 16).
`locale`	`string`	`'en'`	UI locale for day/button labels. Supported: `'en'`, `'it'`.
`startOfWeek`	`int`	`1`	First day of week: `1` = Monday, `0` = Sunday.
`nowIndicator`	`bool`	`true`	Show a red line at the current time.
`eventIdKey`	`string`	`'id'`	Key used to read the event's unique identifier.
`eventTitleKey`	`string`	`'title'`	Key used to read the event's display title.
`eventStartKey`	`string`	`'start'`	Key used to read the event's start datetime (`Y-m-d H:i`).
`eventEndKey`	`string`	`'end'`	Key used to read the event's end datetime (`Y-m-d H:i`).
`eventColorKey`	`string`	`'color'`	Key used to read the event's color variant. Accepts Aura color tokens (e.g. `primary`, `success`, `danger`).