PHPackages                             danidoble/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. danidoble/livewire-calendar

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

danidoble/livewire-calendar
===========================

A simple Laravel package skeleton development environment

v3.0.1(1y ago)162[3 PRs](https://github.com/danidoble/livewire-calendar/pulls)MITPHPPHP ^8.1CI passing

Since May 20Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/danidoble/livewire-calendar)[ Packagist](https://packagist.org/packages/danidoble/livewire-calendar)[ RSS](/packages/danidoble-livewire-calendar/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (6)Versions (7)Used By (0)

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

[](#livewire-calendar)

### Note

[](#note)

This package is based in the original package [asantibanez/livewire-calendar](https://github.com/asantibanez/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.

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

[](#installation)

You can install the package via composer:

```
composer require danidoble/livewire-calendar
```

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

[](#requirements)

- Laravel 10 or higher
- Livewire 3.4 or higher

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`. Also, remove the `render` method. 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', '