Laravel Calendar Component
Free · MITInteractive calendar component with month, week, and day views, event display, color-coded categories, timed events, and locale support.
A Calendar 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::calendar>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::calendar :events="$events" />See the full API, props and live examples in the Calendar documentation.
Overview
The Calendar component renders an interactive calendar with three views: month, week, and day. Events are shown as colored labels on their respective dates. It supports configurable locale for month/day names, start of week (Monday or Sunday), custom event field mapping, and timed events with business hours. Built with Alpine.js for smooth navigation and view switching.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
view |
string |
'month' |
Initial view: month, week, or day. |
events |
array |
[] |
Array of event objects with title, date, and optional color, start, end. |
locale |
string |
'en' |
Locale for month/day names. |
startOfWeek |
int |
1 |
First day of week: 1 (Monday) or 0 (Sunday). |
eventDateKey |
string |
'date' |
Key name for the event date field. |
eventTitleKey |
string |
'title' |
Key name for the event title field. |
eventColorKey |
string |
'color' |
Key name for the event color field. |
eventStartKey |
string |
'start' |
Key name for the event start time field (HH:MM format). |
eventEndKey |
string |
'end' |
Key name for the event end time field (HH:MM format). |
businessHoursStart |
int |
8 |
First hour shown in week/day time grid (0-23). |
businessHoursEnd |
int |
20 |
Last hour shown in week/day time grid (0-23). |
Event Object Structure
Each event in the events array should follow this structure:
// All-day event (shown in month grid and all-day section in week/day views)
[
'title' => 'Team Meeting',
'date' => '2026-02-15', // YYYY-MM-DD format
'color' => 'blue', // Optional: CSS color name, hex, or Aura color name
]
// Timed event (shown in time grid in week/day views)
[
'title' => 'Standup',
'date' => '2026-02-15',
'start' => '09:00', // HH:MM format
'end' => '09:30', // Optional: HH:MM format
'color' => '#6366f1',
]
Slots
| Slot | Description |
|---|---|
| default | Not used. Events are rendered automatically from the events prop. |
The calendar renders its own internal UI for navigation controls (previous/next, view switcher) and event display. Customize appearance through Tailwind classes on the wrapper or via CSS variables.
See more examples and every variant in the Calendar documentation.