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

ActiveLibrary

xslain/livewire-calendar
========================

Laravel Livewire calendar component

1.0.0(7mo ago)022↓100%MITPHPPHP ^8.2

Since Sep 15Pushed 7mo agoCompare

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

READMEChangelog (1)Dependencies (5)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.

Preview
-------

[](#preview)

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

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

[](#installation)

You can install the package via composer:

```
composer require xslain/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`. 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', '