{"id":13422992,"url":"https://github.com/asantibanez/livewire-resource-time-grid","last_synced_at":"2026-04-01T20:45:00.493Z","repository":{"id":44202683,"uuid":"264031684","full_name":"asantibanez/livewire-resource-time-grid","owner":"asantibanez","description":"Laravel Livewire component to show Events by time and resource in a good looking grid ","archived":false,"fork":false,"pushed_at":"2025-11-10T13:59:54.000Z","size":827,"stargazers_count":228,"open_issues_count":6,"forks_count":46,"subscribers_count":7,"default_branch":"master","last_synced_at":"2026-02-10T18:45:32.790Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asantibanez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-05-14T21:43:11.000Z","updated_at":"2025-11-29T16:38:48.000Z","dependencies_parsed_at":"2024-01-14T23:57:08.000Z","dependency_job_id":"a9eb6840-e2ab-4bfe-bbe7-5ac081b03d31","html_url":"https://github.com/asantibanez/livewire-resource-time-grid","commit_stats":{"total_commits":27,"total_committers":5,"mean_commits":5.4,"dds":"0.33333333333333337","last_synced_commit":"c68b622d076f9ec9ae8af3859794f99c1e53b7ea"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/asantibanez/livewire-resource-time-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-resource-time-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-resource-time-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-resource-time-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-resource-time-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asantibanez","download_url":"https://codeload.github.com/asantibanez/livewire-resource-time-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asantibanez%2Flivewire-resource-time-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:01:05.001Z","updated_at":"2026-04-01T20:45:00.445Z","avatar_url":"https://github.com/asantibanez.png","language":"PHP","funding_links":[],"categories":["Calender","Packages / Plugins"],"sub_categories":[],"readme":"# Livewire Resource Time Grid\n\nThis package allows you to build resource/time grid to show events in a \"calendar\" way. You can define resources as \nanything that owns an event, eg. a particular day, a user, a client, etc. Events loaded with the component will be then\nrendered in columns according to the resource it belongs to and the starting date of the event. \n\n## Preview\n\n![preview](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/preview.gif)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require asantibanez/livewire-resource-time-grid\n```\n\n## Requirements\n\nThis package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood.\n\nIt also uses TailwindCSS (https://tailwindcss.com/) for base styling. \n\nPlease make sure you include both of this dependencies before using this component. \n\n## Usage\n\nIn order to use this component, you must create a new Livewire component that extends from \n`LivewireResourceTimeGrid`\n\nYou can use `make:livewire` to create a new component. For example.\n``` bash\nphp artisan make:livewire AppointmentsGrid\n```\n\nIn the `AppointmentsGrid` class, instead of extending from the base `Component` Livewire class, \nextend from `LivewireResourceTimeGrid`. Also, remove the `render` method. \nYou'll have a class similar to this snippet.\n \n``` php\nclass AppointmentsGrid extends LivewireResourceTimeGrid\n{\n    //\n}\n```\n\nIn this class, you must override the following methods\n\n```php\npublic function resources()\n{\n    // must return a Laravel collection\n}\n\npublic function events()\n{\n    // must return a Laravel collection\n}\n```\n\nIn `resources()` method, return a collection holding the \"resources\" that own the events\nthat are going to be listed in the grid. These \"resources\" must be arrays with `key =\u003e value` pairs\nand must include an `id` and a `title`. You can add any other keys to each \"resource as needed\"\n\nExample\n\n```php\npublic function resources()\n{\n    return collect([\n        ['id' =\u003e 'andres', 'title' =\u003e 'Andres'],\n        ['id' =\u003e 'pamela', 'title' =\u003e 'Pamela'],\n        ['id' =\u003e 'sara', 'title' =\u003e 'Sara'],\n        ['id' =\u003e 'bruno', 'title' =\u003e 'Bruno'],\n    ]);\n}\n```\n\nIn the `events()` method, return a collection holding the events that belong to each of the \"resources\"\nreturned in the `resources()` method. Events must also be keyed arrays holding at least the following keys: \n`id`, `title`, `starts_at`, `ends_at`, `resource_id`. \n\nAlso, the following conditions are expected for each returned event: \n- For each event `resource_id` must match an `id` in the `resources()` returned collection.\n- `starts_at` must be a `Carbon\\Carbon` instance\n- `ends_at` must be a `Carbon\\Carbon` instance\n\nExample\n\n```php\npublic function events()\n{\n    return collect([\n        [\n            'id' =\u003e 1,\n            'title' =\u003e 'Breakfast',\n            'starts_at' =\u003e Carbon::today()-\u003esetTime(10, 0),\n            'ends_at' =\u003e Carbon::today()-\u003esetTime(12, 0),\n            'resource_id' =\u003e 'andres',\n        ],\n        [\n            'id' =\u003e 2,\n            'title' =\u003e 'Lunch',\n            'starts_at' =\u003e Carbon::today()-\u003esetTime(13, 0),\n            'ends_at' =\u003e Carbon::today()-\u003esetTime(15, 0),\n            'resource_id' =\u003e 'pamela',\n        ],\n    ]);\n}\n```\n\nNow, we can include our component in any view. You must specify 3 parameters, \n`starting-hour`, `ending-hour` and `interval`. These parameters represent the times of a day the grid will render\nand how many divisions per hour it will display. (`interval` must be in minutes and less than `60`)\n\nExample\n\n```blade\n\u003clivewire:appointments-grid\n    starting-hour=\"8\"\n    ending-hour=\"19\"\n    interval=\"15\"\n/\u003e\n``` \n\nYou should include scripts with `@livewireResourceTimeGrid` to enable drag and drop which is turned on by default.\nYou must include them after `@livewireScripts`\n\n```blade\n@livewireScripts\n@livewireResourceTimeGridScripts\n``` \n\nThis will render a grid starting from 8am til 7pm inclusive with time slots of 15 minutes.\n\n![example](https://github.com/asantibanez/livewire-resource-time-grid/raw/master/example.png)\n\nBy default, the component uses all the available width and height. \nYou can constrain it to use a specific set of dimensions with a wrapper element.\n\n## Advanced Usage\n\n### UI customization\nYou can customize the behavior of the component with the following properties when rendering on a view:\n\n- `resource-column-header-view` which can be any `blade.php` view that renders information of a resource. \nThis view will be injected with a `$resource` variable holding its data.\n- `event-view` which can be any `blade.php` view that will be used to render the event card. \nThis view will be injected with a `$event` variable holding its data. \n- `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 \nrespectively. Defaults used are `4` and `8` respectively. These will be used as `rem` values.\n- `before-grid-view` and `after-grid-view` can be any `blade.php` views that can be rendered before or after\nthe grid itself. These can be used to add extra features to your component using Livewire.\n\nExample\n\n```blade\n\u003clivewire:appointments-grid\n    starting-hour=\"8\"\n    ending-hour=\"19\"\n    interval=\"15\"\n    resource-column-header-view=\"path/to/view/staring/from/views/folder\"\n    event-view=\"path/to/view/staring/from/views/folder\"\n    resource-column-header-height-in-rems=\"4\"\n    hour-height-in-rems=\"8\"\n    before-grid-view=\"path/to/view/staring/from/views/folder\"\n    after-grid-view=\"path/to/view/staring/from/views/folder\"\n/\u003e\n```\n\n### Interaction customization\n\nYou can override the following methods to add interactivity to your component\n\n```php\npublic function hourSlotClick($resourceId, $hour, $slot)\n{\n    // This event is triggered when a time slot is clicked.// \n    // You'll get the resource id as well as the hour and minute\n    // clicked by the user\n}\n\npublic function onEventClick($event)\n{\n    // This event will fire when an event is clicked. You will get the event that was\n    // clicked by the user\n}\n\npublic function onEventDropped($eventId, $resourceId, $hour, $slot)\n{\n    // This event will fire when an event is dragged and dropped into another time slot\n    // You will get the event id, the new resource id + hour + minute where it was\n    // dragged to\n}\n```\n\nYou can also override how events and resources are matched instead of using a `resource_id` and `id` respectively.\nTo do this, you must override the following method\n\n```php\npublic function isEventForResource($event, $resource)\n{\n    // Must return true or false depending if the $resource is the owner of the $event\n}\n```\n\nThe base implementation for this method is \n\n```php\nreturn $event['resource_id'] == $resource['id'];\n```\n\nYou can customize it as you need. 👍 \n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Todo\n\nAdd more tests 💪\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email santibanez.andres@gmail.com instead of using the issue tracker.\n\n## Credits\n\n- [Andrés Santibáñez](https://github.com/asantibanez)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasantibanez%2Flivewire-resource-time-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasantibanez%2Flivewire-resource-time-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasantibanez%2Flivewire-resource-time-grid/lists"}