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

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

d4ve-r/livewire-resource-time-grid
==================================

Laravel Livewire resource time grid component

v0.0.1(1y ago)08MITPHPPHP ^7.2|^8.0|^8.1

Since Sep 21Pushed 1y agoCompare

[ Source](https://github.com/D4ve-R/livewire-resource-time-grid)[ Packagist](https://packagist.org/packages/d4ve-r/livewire-resource-time-grid)[ Docs](https://github.com/d4ve-r/livewire-resource-time-grid)[ GitHub Sponsors](https://github.com/D4ve-R)[ RSS](/packages/d4ve-r-livewire-resource-time-grid/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (4)Versions (2)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/d4ve-r/livewire-resource-time-grid/raw/master/assets/preview.gif)](https://github.com/d4ve-r/livewire-resource-time-grid/raw/master/assets/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/d4ve-r/livewire-resource-time-grid/raw/master/assets/example.png)](https://github.com/d4ve-r/livewire-resource-time-grid/raw/master/assets/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

23

—

LowBetter than 27% of packages

Maintenance35

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 53.5% 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

Unknown

Total

1

Last Release

598d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4bd4f3f80368e9e28696bd48aa5b6e7c80a590daa3893e78eaa02ae801e02ec1?d=identicon)[D4ve-R](/maintainers/D4ve-R)

---

Top Contributors

[![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (23 commits)")[![D4ve-R](https://avatars.githubusercontent.com/u/69651599?v=4)](https://github.com/D4ve-R "D4ve-R (9 commits)")[![barryvdh](https://avatars.githubusercontent.com/u/973269?v=4)](https://github.com/barryvdh "barryvdh (5 commits)")[![edwinvdpol](https://avatars.githubusercontent.com/u/9265514?v=4)](https://github.com/edwinvdpol "edwinvdpol (2 commits)")[![stojankukrika](https://avatars.githubusercontent.com/u/10199584?v=4)](https://github.com/stojankukrika "stojankukrika (2 commits)")[![wilburpowery](https://avatars.githubusercontent.com/u/15817188?v=4)](https://github.com/wilburpowery "wilburpowery (1 commits)")[![fwartner](https://avatars.githubusercontent.com/u/6692500?v=4)](https://github.com/fwartner "fwartner (1 commits)")

---

Tags

livewirelivewire-resource-time-grid

###  Code Quality

TestsPHPUnit

### Embed Badge

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

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

###  Alternatives

[livewire/flux

The official UI component library for Livewire.

9385.0M86](/packages/livewire-flux)[rappasoft/laravel-livewire-tables

A dynamic table component for Laravel Livewire

2.0k2.7M31](/packages/rappasoft-laravel-livewire-tables)[mediconesystems/livewire-datatables

Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS

1.2k711.3k8](/packages/mediconesystems-livewire-datatables)[livewire/volt

An elegantly crafted functional API for Laravel Livewire.

4195.3M84](/packages/livewire-volt)[masmerise/livewire-toaster

Beautiful toast notifications for Laravel / Livewire.

505550.3k6](/packages/masmerise-livewire-toaster)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)

PHPackages © 2026

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