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

ActiveLibrary

wprk/livewire-calendar
======================

Laravel Livewire calendar component

0.0.3(5y ago)42821[1 issues](https://github.com/wprk/livewire-calendar/issues)MITPHPPHP ^7.3|^7.4

Since Sep 21Pushed 4y ago1 watchersCompare

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

READMEChangelog (2)Dependencies (4)Versions (4)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.

This package was originally created by [Andrés Santibáñez](https://github.com/asantibanez) all credit to him. I have forked the repository in order to develop additional functionality.

Preview
-------

[](#preview)

[![preview](https://github.com/wprk/livewire-calendar/raw/master/preview.gif)](https://github.com/wprk/livewire-calendar/raw/master/preview.gif)

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

[](#installation)

You can install the package via composer:

```
composer require wprk/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 Calendar
```

In the `Calendar` 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 Calendar 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', '