mrshanebarron/calendar

Date picker and calendar view for Laravel. Supports Livewire and Blade.

dev-main 2025-12-14 04:33 UTC

Requires

• php: ^8.1
• illuminate/support: ^10.0|^11.0|^12.0

Requires (Dev)

• orchestra/testbench: ^8.0|^9.0
• pestphp/pest: ^2.0

MIT

• Shane Barron

• ui
• calendar
• component
• laravel
• blade
• livewire

README

Date picker and calendar view with event support. Built for Laravel with support for Livewire, Blade, and Alpine.js.

Installation

composer require mrshanebarron/calendar

The service provider will be auto-discovered. If you need to register it manually:

// config/app.php
'providers' => [
    // ...
    MrShaneBarron\Calendar\CalendarServiceProvider::class,
];

Usage

Livewire Component

<livewire:ld-calendar />

Blade Component

<x-ld-calendar />

With Props

<x-ld-calendar
    :events="[]"
    :selectable="true"
    :multiSelect="false"
    minDate=null
    maxDate=null
/>

Props

Prop	Type	Default	Description
events	array	[]	Array of events with 'date', 'title', 'color'
selectable	boolean	true	Allow date selection
multiSelect	boolean	false	Allow multiple date selection
minDate	string	null	Minimum selectable date
maxDate	string	null	Maximum selectable date

Configuration

Publish the config file:

php artisan vendor:publish --tag=ld-calendar-config

This will create a config/ld-calendar.php file where you can customize default values.

Customization

Publishing Views

Customize the component appearance by publishing the views:

php artisan vendor:publish --tag=ld-calendar-views

Views will be published to resources/views/vendor/ld-calendar/.

Styling

The component uses Tailwind CSS classes by default. You can customize styles by:

1. Publishing views and modifying the Blade templates
2. Using the class attribute to add custom classes
3. Overriding default styles in your CSS

<x-ld-calendar class="custom-class" />

Events

The component dispatches Livewire events you can listen to:

Event	Payload	Description
calendar:updated	Component data	Fired when state changes
calendar:initialized	Initial data	Fired on component mount

// In your Livewire component
protected $listeners = ['calendar:updated' => 'handleUpdate'];

public function handleUpdate($data)
{
    // Handle the update
}

Alpine.js Integration

The component works seamlessly with Alpine.js:

<div x-data="{ ' }} selected: null {{ ' }">
    <x-ld-calendar x-model="selected" />
    <p x-text="selected"></p>
</div>

Requirements

• PHP 8.1+
• Laravel 10.x, 11.x, or 12.x
• Livewire 3.x
• Tailwind CSS 3.x (optional, for default styling)

Testing

composer test

Changelog

Please see CHANGELOG for recent changes.

Contributing

Contributions are welcome! Please see CONTRIBUTING for details.

Security

If you discover a security vulnerability, please email [e-mail] instead of using the issue tracker.

Credits

• Shane Barron
• All Contributors

License

The MIT License (MIT). Please see License File for more information.