Laravel Packages

Laravel Livewire Calendar Component

Published
Laravel Livewire Calendar Component image

Laravel Livewire Calendar is a component by Andrés Santibáñez to show events in a good looking monthly calendar.

To get started with this component, you'll create a component that extends the LivewireCalendar class and override the events() method:

public function events(): Collection
{
return Model::query()
->whereDate('scheduled_at', '>=', $this->gridStartsAt)
->whereDate('scheduled_at', '<=', $this->gridEndsAt)
->get()
->map(function (Model $model) {
return [
'id' => $model->id,
'title' => $model->title,
'description' => $model->notes,
'date' => $model->scheduled_at,
];
});
}

Next, you need to include your component in any view as you would any Livewire component:

<livewire:appointments-calendar/>
 
{{-- Specify year and month --}}
<livewire:appointments-calendar
year="2019"
month="12"
/>

This component also provides more advanced UI customization. Check out the readme for advanced customization. You can learn more about this package, get full installation instructions, and view the source code on GitHub.

Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Sponsored

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
Fluent Rule Builders for All Laravel Validation Rules image

Fluent Rule Builders for All Laravel Validation Rules

Read article
Laravel URL AI Transformer: Extract Structured Data From URLs image

Laravel URL AI Transformer: Extract Structured Data From URLs

Read article
Rule Builders for Every Validation Rule in Laravel 13.36 image

Rule Builders for Every Validation Rule in Laravel 13.36

Read article
PHP News: A New Site for PHP Releases, RFCs, and Packages image

PHP News: A New Site for PHP Releases, RFCs, and Packages

Read article
Pause Polling in Background Tabs in Inertia.js v3.9 image

Pause Polling in Background Tabs in Inertia.js v3.9

Read article
Look What You Helped Me Build image

Look What You Helped Me Build

Read article