PHPackages                             webotvorba/livewire-calendar - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webotvorba/livewire-calendar

ActiveLibrary[Utility & Helpers](/categories/utility)

webotvorba/livewire-calendar
============================

Laravel Livewire calendar component with laravel 12 support

1.0.0(1y ago)06MITPHPPHP ^7.2|^8.0|^8.1|^8.2

Since Feb 27Pushed 1y agoCompare

[ Source](https://github.com/Webotvorba/livewire-calendar)[ Packagist](https://packagist.org/packages/webotvorba/livewire-calendar)[ Docs](https://github.com/omnia-digital/livewire-calendar)[ RSS](/packages/webotvorba-livewire-calendar/feed)WikiDiscussions dev Synced 1mo ago

READMEChangelog (1)Dependencies (4)Versions (2)Used By (0)

Livewire Calendar
=================

[](#livewire-calendar)

This package allows you to build a Livewire monthly calendar grid to show events for each day. Events can be loaded from within the component and will be presented on each day depending on the date of the event.

Special thanks to asantibanez/livewire-calendar as this originally was a fork of that package. We are using this new package in one of our large projects so we will be actively maintaining.

Preview
-------

[](#preview)

[![preview](https://github.com/omnia-digital/livewire-calendar/raw/main/preview.gif)](https://github.com/omnia-digital/livewire-calendar/raw/main/preview.gif)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require omnia-digital/livewire-calendar
```

Requirements
------------

[](#requirements)

This package uses `livewire/livewire` () under the hood.

It also uses TailwindCSS () for base styling.

Please make sure you include both of this dependencies before using this component.

Usage
-----

[](#usage)

In order to use this component, you must create a new Livewire component that extends from `LivewireCalendar`

You can use `make:livewire` to create a new component. For example.

```
php artisan make:livewire AppointmentsCalendar
```

- In the `AppointmentsCalendar` class, instead of extending from the base `Component` Livewire class, extend from `LivewireCalendar`.
- **Remove the `render` method or you will override the parent and the calendar will not display.**
- You'll have a class similar to this snippet.

```
class AppointmentsCalendar extends LivewireCalendar
{
    //
}
```

In this class, you must override the following method

```
public function events() : Collection
{
    // must return a Laravel collection
}
```

In the `events()` method, return a collection holding the events that will be displayed on the calendar. Events must be keyed arrays holding at least the following keys: `id`, `title`, `description`, `date` (`date` must be a `Carbon\Carbon` instance).

Example

```
public function events() : Collection
{
    return collect([
        [
            'id' => 1,
            'title' => 'Breakfast',
            'description' => 'Pancakes! 🥞',
            'date' => Carbon::today(),
        ],
        [
            'id' => 2,
            'title' => 'Meeting with Pamela',
            'description' => 'Work stuff',
            'date' => Carbon::tomorrow(),
        ],
    ]);
}
```

The `date` value will be used to determine to what day the event belongs to. To load values in the `events()` method, you can use the following component properties to filter your events.

- `startsAt`: starting date of month
- `endsAt`: ending date of month
- `gridStartsAt`: starting date of calendar grid. Can be a date from the previous month.
- `endingStartsAt`: ending date of calendar grid. Can be a date from the next month.

Example

```
public function events(): Collection
{
    return Model::query()
        ->whereDate('scheduled_at', '>=', $this->gridStartsAt)
        ->whereDate('scheduled_at', '