Logo
Neura UI
Loading…
Logo
All pages 86

Event Calendar

A full scheduling calendar with month, week, day and agenda views for displaying and managing events.

Basic Usage

Pass an array of events and the calendar renders them across switchable views. Each event is a plain array with title , start , end and an optional color .
blade

All day
<neura::event-calendar :events="[
    ['title' => 'Team standup', 'start' => '2026-07-22 09:00', 'end' => '2026-07-22 09:30', 'color' => 'blue'],
    ['title' => 'Design review', 'start' => '2026-07-22 11:00', 'end' => '2026-07-22 12:30', 'color' => 'violet'],
    ['title' => 'Company offsite', 'start' => '2026-07-10', 'end' => '2026-07-12', 'allDay' => true, 'color' => 'teal'],
]" />

Week View

Open the calendar directly on a specific view with the view prop. The week and day views use a time grid with an all-day row, overlapping-event layout and a live current-time indicator.
blade

All day
<neura::event-calendar :events="$events" view="week" />

Day View

The day view focuses on a single day. Restrict the visible hours with hourStart and hourEnd to show only business hours.
blade

All day
<neura::event-calendar :events="$events" view="day" :hour-start="7" :hour-end="20" />

Agenda View

The agenda view lists every event in the current month grouped by day — ideal for a compact, scannable schedule.
blade

All day
<neura::event-calendar :events="$events" view="agenda" />

With Mini Calendar

Enable show-mini-calendar to add a date navigator in the sidebar. It embeds the standard <neura::calendar> — picking a date jumps the schedule to it.
blade

All day
<neura::event-calendar :events="$events" show-mini-calendar :first-day-of-week="1" />

Limited Views

Show only the views you need with the views prop. The switcher and navigation adapt automatically.
blade

All day
<neura::event-calendar :events="$events" :views="['week', 'day']" view="week" />

Toolbar Action Slot

The default slot renders into the toolbar, next to the view switcher — a natural place for an “Add event” button. Combine it with the emitted events below to open your own dialog.
blade

All day
<div
    x-on:day-selected="console.log('empty day', $event.detail.date)"
    x-on:slot-selected="console.log('empty slot', $event.detail.start)"
    x-on:event-clicked="openDialog($event.detail.event)"
>
    <neura::event-calendar :events="$events">
        <neura::button size="sm" icon="plus">New event</neura::button>
    </neura::event-calendar>
</div>

Sizes

Like every other component, density is driven by the size prop (sm , md , lg ), resolved from the event-calendar config and its size pack. It scales cell padding, day numbers, event text and the time-grid hour height together.
blade

All day
<neura::event-calendar :events="$events" size="sm" />
<neura::event-calendar :events="$events" size="md" /> 
<neura::event-calendar :events="$events" size="lg" />

Rounded & Shadow

The frame's corner radius and shadow resolve from the design-system config (falling back to the global style), and can be overridden per instance with the rounded and shadow props — same tokens as <neura::card> .
blade

All day
<neura::event-calendar :events="$events" rounded="2xl" shadow="lg" />

Event Colors

Each event accepts a color from the palette below. Timed events show a colored dot, all-day events render as a filled bar. Unknown colors fall back to blue .
blue
emerald
violet
amber
rose
sky
orange
teal
pink
indigo
slate

Props

Property Type Default Description
events array [] Events to display. Each: ['id', 'title', 'start', 'end', 'allDay', 'color', 'location']
view string month Initial view: month , week , day or agenda
views array [month, week, day, agenda] Which views appear in the switcher
date string today Initial focused date (YYYY-MM-DD)
firstDayOfWeek number 0 First day of week (0 = Sunday, 1 = Monday)
hourStart / hourEnd number 0 / 24 Visible hour range for the week and day time grid
scrollTo number 7 Hour the time grid scrolls to on load
showMiniCalendar boolean false Show an embedded <neura::calendar> date navigator (large screens)
locale string en Locale for month, weekday and time labels
height string 40rem CSS height of the calendar frame
size string config (md) Density: sm , md or lg
rounded string config (global) Corner radius token (none … 3xl , full )
shadow string config (global) Shadow token (none … xl )
slot slot — Toolbar action area, next to the view switcher

Events

The calendar dispatches DOM events so your application owns the data and any create/edit flow:
Event Payload Description
event-clicked { event } An event chip was clicked (original event object)
day-selected { date } An empty day cell was clicked (month view)
slot-selected { start, end } An empty time slot was clicked (week / day view)
range-changed { view, start, end } The visible view or period changed — fetch events for the new range

With Livewire

Load events server-side and refresh them whenever the visible range changes:
PHP 
class Schedule extends Component
{
    public array $events = [];

    public function loadRange(string $start, string $end): void
    {
        $this->events = Event::whereBetween('start', [$start, $end])
            ->get()
            ->map->toCalendarArray()
            ->all();
    }
}


<div x-on:range-changed="$wire.loadRange($event.detail.start, $event.detail.end)">
    <neura::event-calendar :events="$events" />
</div>