Scheduler

The scheduler component lays out a day or a week as an hour grid and places timed events on it, the pattern behind a room booking board, a staff roster, or an appointment calendar. Give it a date and, for day view, a list of resources such as rooms or staff members. Each resource becomes its own column, and events are placed by their start and end time. Two events that overlap share their column side by side instead of stacking on top of each other.

Scheduler vs. Calendar

Scheduler is not a bigger Calendar, it solves a different problem. Calendar displays dates across full months or weeks, with each day showing its scheduled events. Scheduler focuses on a single day or week using an hour-by-hour timeline, positioning events according to their exact start and end times. In day view, it can also divide the timeline into separate columns for each resource. Use Calendar when users need to browse schedules and choose dates. Use Scheduler when time and availability are the primary focus, such as for room bookings, staff rosters, appointments, or other resource-based scheduling.

Day View With Resources

<x-bladewind::scheduler
    date="2027-03-10"
    :resources="[
        ['id' => 'room-a', 'label' => 'Room A'],
        ['id' => 'room-b', 'label' => 'Room B'],
        ['id' => 'room-c', 'label' => 'Room C'],
    ]"
    :events="[
        ['id' => 1, 'resource_id' => 'room-a', 'label' => 'Team standup', 'start' => '2027-03-10 09:00', 'end' => '2027-03-10 09:30', 'color' => 'primary'],
        ...
    ]">
</x-bladewind::scheduler>

Week View

Set view="week" to show the seven days of the week containing date as columns instead. Resources are not used in week view.

<x-bladewind::scheduler view="week" date="2027-03-10" :events="$events">
</x-bladewind::scheduler>

Visible Hours And Grid Granularity

Set start_hour and end_hour to the range worth showing, and slot_minutes (60, 30, or 15) for finer gridlines.

<x-bladewind::scheduler
    date="2027-03-10"
    start_hour="12"
    end_hour="16"
    slot_minutes="30"
    :resources="..."
    :events="...">
</x-bladewind::scheduler>

Selection Hooks

Set on_slot_click to the name of a JavaScript function to react to a click on an empty slot, called as (columnId, "H:i"), where columnId is a resource id in day view or a date in week view. Set on_event_click to react to a click on an existing event instead, called as (eventId). An event given an href renders as a real link and does not fire on_event_click.

<x-bladewind::scheduler
    date="2027-03-10"
    on_slot_click="proposeBooking"
    on_event_click="showBookingDetails"
    :resources="..."
    :events="...">
</x-bladewind::scheduler>

<script>
    function proposeBooking(columnId, time) {
        console.log('Book', columnId, 'at', time);
    }
    function showBookingDetails(eventId) {
        console.log('Show booking', eventId);
    }
</script>

Timezone Label

This component does not convert times itself. Pass event times already converted to the viewer's timezone, and optionally set timezone to show a label confirming which one is in use.

<x-bladewind::scheduler date="2027-03-10" timezone="America/New_York" ...>
</x-bladewind::scheduler>

Full List Of Attributes

Scheduler with all attributes defined

<x-bladewind::scheduler
view="day"
date="2027-03-10"
:resources="[['id' => 'r1', 'label' => 'Room A']]"
:events="$roomEvents"
start-hour="8"
end-hour="18"
slot-minutes="30"
week-starts="1"
timezone="GMT"
on-slot-click="onSlotClick"
on-event-click="onEventClick"
class="ml-2" />