Livewire Calendar

Lightweight and customizable calendar component for Laravel Livewire 3, styled with TailwindCSS. Focused on simplicity, extensibility, and DX.

✨ New in v1.1

• 📱 Enhanced Responsiveness - Adaptive layout for all screen sizes
• 👆 Swipe Navigation - Swipe left/right to change months on mobile
• 🎯 Touch-friendly - 44px minimum tap targets for better mobile UX
• 🔤 Compact Weekdays - Abbreviated weekday names on mobile (D, S, T...)
• ✨ Today Animation - Pulsing indicator for current day
• 🎨 Smooth Transitions - Animated cell interactions

Requisitos

• PHP 8.2+
• Laravel 10+
• Livewire ^3.5.0|^4.0.0
• TailwindCSS 3+

Installation

composer require caiquebispo/livewire-calendar

Publishing

You can publish assets, views and config:

# Publish all
php artisan vendor:publish --provider="CaiqueBispo\Calendar\Provider\CalendarServiceProvider"

# Only config
php artisan vendor:publish --provider="CaiqueBispo\Calendar\Provider\CalendarServiceProvider" --tag="config"

# Only views
php artisan vendor:publish --provider="CaiqueBispo\Calendar\Provider\CalendarServiceProvider" --tag="views"

# Only assets
php artisan vendor:publish --provider="CaiqueBispo\Calendar\Provider\CalendarServiceProvider" --tag="assets"

Basic usage

// In your controller or Livewire component
public function render()
{
    $events = [
        [
            "day" => "2025-09-04",
            "data" => [
                ["title" => "Reunião", "id" => 1],
                ["title" => "Entrega", "id" => 2]
            ]
        ],
        [
            "day" => "2025-09-10",
            "data" => [
                ["title" => "Viagem", "id" => 3]
            ]
        ]
    ];
    
    return view('your-view', ['events' => $events]);
}

<!-- In your Blade -->
<livewire:calendar 
    :events="$events" 
    :lazy-load-events="true" 
    :max-items-per-day="2" 
/>

Customization

The calendar offers multiple customization points:

Props

• events: Event array
• lazy-load-events: If true, emits calendar:month-changed when month changes (useful for lazy loading)
• max-items-per-day: Max visible items per day (rest shown in modal)
• day-cell-view: Blade view path to customize day cell (e.g. calendar.custom-day-cell)
• mobile-view: Mobile behavior for weeks layout: stack (default) or scroll

Slots

Available slots:

<livewire:calendar :events="$events">
    <!-- Custom header -->
    <x-slot:header>
        <!-- Conteúdo personalizado do cabeçalho -->
    </x-slot:header>
    
    <!-- The old day slot was replaced by day-cell-view. Prefer the Blade partial via `day-cell-view` or `calendar.day_cell_view`. -->
    
    <!-- Custom "see more" modal -->
    <x-slot:modal>
        <!-- Conteúdo personalizado do modal -->
    </x-slot:modal>
</livewire:calendar>

Customizing day cell via Blade partial

You can provide a view to render each day cell. Two options:

1. Pass on component usage:

<livewire:calendar
    :events="$events"
    day-cell-view="calendar.custom-day-cell"
    mobile-view="scroll"
/>

2. Define globally in package config (day_cell_view):

// packages/caiquebispo/livewire-calendar/src/config/calendar.php
'day_cell_view' => 'calendar.custom-day-cell',
// 'mobile_view' => 'scroll',

The view receives: date, dayNumber, isCurrentMonth, isToday, events, maxItemsPerDay.

Example in resources/views/calendar/custom-day-cell.blade.php:

<div class="flex flex-col h-full">
    <div class="text-sm font-semibold mb-1">{{ $dayNumber }}</div>
    <div class="space-y-1">
        @foreach(array_slice($events, 0, $maxItemsPerDay) as $event)
            <div wire:click="eventClicked({{ $event['id'] }})" class="text-xs p-1 rounded bg-green-100 text-green-800 truncate cursor-pointer">
                {{ $event['title'] }}
            </div>
        @endforeach
        @if(count($events) > $maxItemsPerDay)
            <button type="button" wire:click="openDayModal('{{ $date }}')" class="text-xs p-1 text-center w-full rounded bg-gray-100 text-gray-700">
                + {{ count($events) - $maxItemsPerDay }} mais
            </button>
        @endif
    </div>
</div>

Events

Emitted Livewire events:

• calendar:month-changed: when the month changes (useful for lazy loading)
• calendar:day-clicked: when a day is clicked
• calendar:event-clicked: when an event is clicked

Dark mode

Fully Tailwind dark mode compatible via dark class on the root element.

Licença

Este pacote é open-source e está disponível sob a licença MIT.