PHPackages                             asantibanez/livewire-resource-time-grid - 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. asantibanez/livewire-resource-time-grid

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

asantibanez/livewire-resource-time-grid
=======================================

Laravel Livewire resource time grid component

v1.6.0(9mo ago)2318.2k↓65.6%47[3 issues](https://github.com/asantibanez/livewire-resource-time-grid/issues)[4 PRs](https://github.com/asantibanez/livewire-resource-time-grid/pulls)MITPHPPHP ^7.2|^8.0|^8.1|^8.2|^8.3CI failing

Since May 15Pushed 9mo ago7 watchersCompare

[ Source](https://github.com/asantibanez/livewire-resource-time-grid)[ Packagist](https://packagist.org/packages/asantibanez/livewire-resource-time-grid)[ Docs](https://github.com/asantibanez/livewire-resource-time-grid)[ RSS](/packages/asantibanez-livewire-resource-time-grid/feed)WikiDiscussions master Synced today

READMEChangelog (7)Dependencies (4)Versions (8)Used By (0)

Livewire Resource Time Grid
===========================

[](#livewire-resource-time-grid)

This package allows you to build resource/time grid to show events in a "calendar" way. You can define resources as anything that owns an event, eg. a particular day, a user, a client, etc. Events loaded with the component will be then rendered in columns according to the resource it belongs to and the starting date of the event.

Preview
-------

[](#preview)

[![preview](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/preview.gif)](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/preview.gif)

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

[](#installation)

You can install the package via composer:

```
composer require asantibanez/livewire-resource-time-grid
```

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 `LivewireResourceTimeGrid`

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

```
php artisan make:livewire AppointmentsGrid
```

In the `AppointmentsGrid` class, instead of extending from the base `Component` Livewire class, extend from `LivewireResourceTimeGrid`. Also, remove the `render` method. You'll have a class similar to this snippet.

```
class AppointmentsGrid extends LivewireResourceTimeGrid
{
    //
}
```

In this class, you must override the following methods

```
public function resources()
{
    // must return a Laravel collection
}

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

In `resources()` method, return a collection holding the "resources" that own the events that are going to be listed in the grid. These "resources" must be arrays with `key => value` pairs and must include an `id` and a `title`. You can add any other keys to each "resource as needed"

Example

```
public function resources()
{
    return collect([
        ['id' => 'andres', 'title' => 'Andres'],
        ['id' => 'pamela', 'title' => 'Pamela'],
        ['id' => 'sara', 'title' => 'Sara'],
        ['id' => 'bruno', 'title' => 'Bruno'],
    ]);
}
```

In the `events()` method, return a collection holding the events that belong to each of the "resources" returned in the `resources()` method. Events must also be keyed arrays holding at least the following keys: `id`, `title`, `starts_at`, `ends_at`, `resource_id`.

Also, the following conditions are expected for each returned event:

- For each event `resource_id` must match an `id` in the `resources()` returned collection.
- `starts_at` must be a `Carbon\Carbon` instance
- `ends_at` must be a `Carbon\Carbon` instance

Example

```
public function events()
{
    return collect([
        [
            'id' => 1,
            'title' => 'Breakfast',
            'starts_at' => Carbon::today()->setTime(10, 0),
            'ends_at' => Carbon::today()->setTime(12, 0),
            'resource_id' => 'andres',
        ],
        [
            'id' => 2,
            'title' => 'Lunch',
            'starts_at' => Carbon::today()->setTime(13, 0),
            'ends_at' => Carbon::today()->setTime(15, 0),
            'resource_id' => 'pamela',
        ],
    ]);
}
```

Now, we can include our component in any view. You must specify 3 parameters, `starting-hour`, `ending-hour` and `interval`. These parameters represent the times of a day the grid will render and how many divisions per hour it will display. (`interval` must be in minutes and less than `60`)

Example

```

```

You should include scripts with `@livewireResourceTimeGrid` to enable drag and drop which is turned on by default. You must include them after `@livewireScripts`

```
@livewireScripts
@livewireResourceTimeGridScripts
```

This will render a grid starting from 8am til 7pm inclusive with time slots of 15 minutes.

[![example](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/example.png)](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/example.png)

By default, the component uses all the available width and height. You can constrain it to use a specific set of dimensions with a wrapper element.

Advanced Usage
--------------

[](#advanced-usage)

### UI customization

[](#ui-customization)

You can customize the behavior of the component with the following properties when rendering on a view:

- `resource-column-header-view` which can be any `blade.php` view that renders information of a resource. This view will be injected with a `$resource` variable holding its data.
- `event-view` which can be any `blade.php` view that will be used to render the event card. This view will be injected with a `$event` variable holding its data.
- `resource-column-header-height-in-rems` and `hour-height-in-rems` can be used to customize the height of each resource view or time slot respectively. Defaults used are `4` and `8` respectively. These will be used as `rem` values.
- `before-grid-view` and `after-grid-view` can be any `blade.php` views that can be rendered before or after the grid itself. These can be used to add extra features to your component using Livewire.

Example

```

```

### Interaction customization

[](#interaction-customization)

You can override the following methods to add interactivity to your component

```
public function hourSlotClick($resourceId, $hour, $slot)
{
    // This event is triggered when a time slot is clicked.//
    // You'll get the resource id as well as the hour and minute
    // clicked by the user
}

public function onEventClick($event)
{
    // This event will fire when an event is clicked. You will get the event that was
    // clicked by the user
}

public function onEventDropped($eventId, $resourceId, $hour, $slot)
{
    // This event will fire when an event is dragged and dropped into another time slot
    // You will get the event id, the new resource id + hour + minute where it was
    // dragged to
}
```

You can also override how events and resources are matched instead of using a `resource_id` and `id` respectively. To do this, you must override the following method

```
public function isEventForResource($event, $resource)
{
    // Must return true or false depending if the $resource is the owner of the $event
}
```

The base implementation for this method is

```
return $event['resource_id'] == $resource['id'];
```

You can customize it as you need. 👍

### Testing

[](#testing)

```
composer test
```

### Todo

[](#todo)

Add more tests 💪

### Changelog

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

### Security

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Andrés Santibáñez](https://github.com/asantibanez)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

53

—

FairBetter than 96% of packages

Maintenance57

Moderate activity, may be stable

Popularity42

Moderate usage in the ecosystem

Community22

Small or concentrated contributor base

Maturity76

Established project with proven stability

 Bus Factor1

Top contributor holds 67.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~334 days

Recently: every ~487 days

Total

7

Last Release

280d ago

PHP version history (5 changes)1.0.0PHP ^7.3

1.0.1PHP ^7.2

1.4.0PHP ^7.2|^8.0

1.5.0PHP ^7.2|^8.0|^8.1

v1.6.0PHP ^7.2|^8.0|^8.1|^8.2|^8.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5126648?v=4)[Andrés Santibáñez](/maintainers/asantibanez)[@asantibanez](https://github.com/asantibanez)

---

Top Contributors

[![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (25 commits)")[![barryvdh](https://avatars.githubusercontent.com/u/973269?v=4)](https://github.com/barryvdh "barryvdh (5 commits)")[![stojankukrika](https://avatars.githubusercontent.com/u/10199584?v=4)](https://github.com/stojankukrika "stojankukrika (2 commits)")[![edwinvdpol](https://avatars.githubusercontent.com/u/9265514?v=4)](https://github.com/edwinvdpol "edwinvdpol (2 commits)")[![fwartner](https://avatars.githubusercontent.com/u/6692500?v=4)](https://github.com/fwartner "fwartner (1 commits)")[![Godcharx](https://avatars.githubusercontent.com/u/34008713?v=4)](https://github.com/Godcharx "Godcharx (1 commits)")[![wilburpowery](https://avatars.githubusercontent.com/u/15817188?v=4)](https://github.com/wilburpowery "wilburpowery (1 commits)")

---

Tags

asantibanezlivewire-resource-time-grid

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/asantibanez-livewire-resource-time-grid/health.svg)

```
[![Health](https://phpackages.com/badges/asantibanez-livewire-resource-time-grid/health.svg)](https://phpackages.com/packages/asantibanez-livewire-resource-time-grid)
```

###  Alternatives

[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

731189.9k16](/packages/tallstackui-tallstackui)[livewire/flux

The official UI component library for Livewire.

9628.9M155](/packages/livewire-flux)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.8k](/packages/tomshaw-electricgrid)[venturedrake/laravel-crm

A free open source CRM built as a package for laravel projects

45212.2k](/packages/venturedrake-laravel-crm)[noerd/noerd

111.6k17](/packages/noerd-noerd)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)