{"id":15016870,"url":"https://github.com/omnia-digital/livewire-calendar","last_synced_at":"2026-01-24T20:40:56.843Z","repository":{"id":152446777,"uuid":"621118864","full_name":"omnia-digital/livewire-calendar","owner":"omnia-digital","description":"Laravel Livewire component to show Events in a good looking monthly calendar","archived":false,"fork":false,"pushed_at":"2025-02-28T18:18:59.000Z","size":1164,"stargazers_count":111,"open_issues_count":3,"forks_count":15,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-05-12T19:16:45.944Z","etag":null,"topics":["calendar","laravel","livewire","omnia"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Osimba/livewire-calendar","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omnia-digital.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}},"created_at":"2023-03-30T02:58:42.000Z","updated_at":"2025-05-04T12:16:30.000Z","dependencies_parsed_at":"2024-02-07T18:29:12.702Z","dependency_job_id":"40ae27c2-63ca-4a63-9d4c-5537f258cf20","html_url":"https://github.com/omnia-digital/livewire-calendar","commit_stats":{"total_commits":50,"total_committers":7,"mean_commits":7.142857142857143,"dds":0.38,"last_synced_commit":"1bf9f427fd57905f42d746ac4629a9d0744e8e12"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnia-digital%2Flivewire-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnia-digital%2Flivewire-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnia-digital%2Flivewire-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omnia-digital%2Flivewire-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omnia-digital","download_url":"https://codeload.github.com/omnia-digital/livewire-calendar/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527070,"owners_count":22085917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["calendar","laravel","livewire","omnia"],"created_at":"2024-09-24T19:49:30.156Z","updated_at":"2026-01-24T20:40:56.837Z","avatar_url":"https://github.com/omnia-digital.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Livewire Calendar\n\nThis package allows you to build a Livewire monthly calendar grid to show events for each day. Events can be loaded\nfrom within the component and will be presented on each day depending on the date of the event.\n\nSpecial thanks to asantibanez/livewire-calendar as this originally was a fork of that package. We are using this new package in one of our large projects so we will be actively maintaining.\n\n## Preview\n\n![preview](https://github.com/omnia-digital/livewire-calendar/raw/main/preview.gif)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require omnia-digital/livewire-calendar\n```\n\n## Compatibility\n\nThis package supports a wide range of PHP, Laravel, and Livewire versions:\n\n| Package Version | PHP       | Laravel   | Livewire  |\n|----------------|-----------|-----------|-----------|\n| 4.1.x          | 7.4 - 8.4 | 6 - 12    | 2, 3, 4   |\n| 3.2.x          | 7.4 - 8.3 | 6 - 12    | 2, 3      |\n| 3.1.x          | 7.4 - 8.3 | 6 - 11    | 2, 3      |\n| 3.0.x          | 7.4 - 8.2 | 6 - 10    | 2, 3      |\n| 2.2.x          | 7.4 - 8.2 | 6 - 10    | 2         |\n\n**Recommended installation:**\n\n```bash\ncomposer require omnia-digital/livewire-calendar:^4.1\n```\n\nFor upgrade guides, see [UPGRADE.md](UPGRADE.md).\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`LivewireCalendar`\n\nYou can use `make:livewire` to create a new component. For example.\n``` bash\nphp artisan make:livewire AppointmentsCalendar\n```\n\n- In the `AppointmentsCalendar` class, instead of extending from the base `Component` Livewire class,\nextend from `LivewireCalendar`. \n- **Remove the `render` method or you will override the parent and the calendar will not display.**\n- You'll have a class similar to this snippet.\n\n``` php\nclass AppointmentsCalendar extends LivewireCalendar\n{\n    //\n}\n```\n\nIn this class, you must override the following method\n\n```php\npublic function events() : Collection\n{\n    // must return a Laravel collection\n}\n```\n\nIn the `events()` method, return a collection holding the events that will be displayed on\nthe calendar. Events must be keyed arrays holding at least the following keys:\n`id`, `title`, `description`, `date` (`date` must be a `Carbon\\Carbon` instance).\n\nExample\n\n```php\npublic function events() : Collection\n{\n    return collect([\n        [\n            'id' =\u003e 1,\n            'title' =\u003e 'Breakfast',\n            'description' =\u003e 'Pancakes! 🥞',\n            'date' =\u003e Carbon::today(),\n        ],\n        [\n            'id' =\u003e 2,\n            'title' =\u003e 'Meeting with Pamela',\n            'description' =\u003e 'Work stuff',\n            'date' =\u003e Carbon::tomorrow(),\n        ],\n    ]);\n}\n```\n\nThe `date` value will be used to determine to what day the event belongs to. To\nload values in the `events()` method, you can use the following component properties\nto filter your events.\n- `startsAt`: starting date of month\n- `endsAt`: ending date of month\n- `gridStartsAt`: starting date of calendar grid. Can be a date from the previous month.\n- `endingStartsAt`: ending date of calendar grid. Can be a date from the next month.\n\nExample\n\n```php\npublic function events(): Collection\n{\n    return Model::query()\n        -\u003ewhereDate('scheduled_at', '\u003e=', $this-\u003egridStartsAt)\n        -\u003ewhereDate('scheduled_at', '\u003c=', $this-\u003egridEndsAt)\n        -\u003eget()\n        -\u003emap(function (Model $model) {\n            return [\n                'id' =\u003e $model-\u003eid,\n                'title' =\u003e $model-\u003etitle,\n                'description' =\u003e $model-\u003enotes,\n                'date' =\u003e $model-\u003escheduled_at,\n            ];\n        });\n}\n```\n\n### Multi-Day Events\n\nEvents can span multiple days using `start_date` and `end_date` instead of the legacy `date` field:\n\n```php\npublic function events(): Collection\n{\n    return collect([\n        [\n            'id' =\u003e 1,\n            'title' =\u003e 'Conference',\n            'description' =\u003e 'Annual Tech Conference',\n            'start_date' =\u003e Carbon::parse('2024-03-15'),\n            'end_date' =\u003e Carbon::parse('2024-03-17'),\n        ],\n    ]);\n}\n```\n\nThis event will appear on March 15, 16, and 17 with visual styling indicating it spans multiple days.\n\n#### Multi-Day Event with Times\n\nYou can optionally include `start_time` and `end_time` for display purposes:\n\n```php\n[\n    'id' =\u003e 2,\n    'title' =\u003e 'Training Session',\n    'start_date' =\u003e Carbon::parse('2024-03-20'),\n    'end_date' =\u003e Carbon::parse('2024-03-22'),\n    'start_time' =\u003e '09:00',\n    'end_time' =\u003e '17:00',\n]\n```\n\nThe start time will display on the first day, and end time on the last day.\n\n#### Event Metadata in Custom Views\n\nWhen customizing the event view, multi-day events include additional metadata:\n\n- `$event['is_multiday']` - Boolean, true if event spans multiple days\n- `$event['is_first_day']` - Boolean, true if this is the first day of the event\n- `$event['is_last_day']` - Boolean, true if this is the last day of the event\n- `$event['day_position']` - Integer, which day of the event (1-indexed)\n- `$event['total_days']` - Integer, total number of days the event spans\n\n**Note:** Multi-day events have drag and drop disabled by default.\n\n#### Backwards Compatibility\n\nExisting events using the `date` field will continue to work. The calendar automatically detects which format is being used. If both `date` and `start_date`/`end_date` are present, the new format takes precedence.\n\nNow, we can include our component in any view.\n\nExample\n\n```blade\n\u003clivewire:appointments-calendar/\u003e\n```\n\nThis will render a calendar grid.\n\nBy default, the component will render the current month. If you want to change the\nstarting month, you can set the `initialYear` and `initialMonth` props.\n\n Example\n\n ```blade\n\u003clivewire:appointments-calendar\n    initialYear=\"2019\"\n    initialMonth=\"12\"\n/\u003e\n ```\n\nIf you use it as a nested component, you can use variables and make it dynamic (:key prop will force livewire to re-render calendar).\n\nExample\n\n ```blade\n\u003clivewire:appointments-calendar\n    initialYear=\"{{ $currentYear }}\"\n    initialMonth=\"{{ $currentMonth }}\"\n    :key=\"$currentYear.$currentMonth\"\n/\u003e\n ```\n\n**For Livewire 3+:** Drag and drop is now handled via Alpine.js (bundled with Livewire 3+), so `@livewireCalendarScripts` is optional. It's only needed if you've published and customized the views using the legacy inline event handlers.\n\n**For Livewire 2:** You must include scripts with `@livewireCalendarScripts` to enable drag and drop. Include them after `@livewireScripts`:\n\n```blade\n@livewireScripts\n@livewireCalendarScripts\n```\n\nThe component has 3 public methods that can help navigate forward and backward through months:\n- `goToPreviousMonth`\n- `goToNextMonth`\n- `goToCurrentMonth`\n\nYou can use these methods on extra views using `before-calendar-view` or `after-calendar-view` explained below.\n\n### Advanced usage\n\n### Ui customization\n\nYou can customize the behavior of the component with the following properties when rendering on a view:\n\n- `week-starts-at` which can be a number from 0 to 6 according to Carbon days of week to indicate\nwith which day of week the calendar should render first.\n\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\n- `before-calendar-view` and `after-calendar-view` can be any `blade.php` views that can be rendered before or after\nthe calendar itself. These can be used to add extra features to your component using Livewire.\n\n- `drag-and-drop-classes` can be any css class used to render the hover effect when dragging an event over each day\nin the calendar. By default, this value is `border border-blue-400 border-4`\n\n- `day-of-week-view` which can be any `blade.php` view that will be used to render the header of each calendar day.\nThis view will be injected the `day` property which is a Carbon instance of the day of the week.\n\n```blade\n\u003clivewire:appointments-grid\n    week-starts-at=\"0, 1, 2, 3, 4, 5 or 6. 0 stands for Sunday\"\n    event-view=\"path/to/view/starting/from/views/folder\"\n    day-of-week-view=\"path/to/view/starting/from/views/folder\"\n    before-calendar-view=\"path/to/view/starting/from/views/folder\"\n    after-calendar-view=\"path/to/view/starting/from/views/folder\"\n    drag-and-drop-classes=\"css classes\"\n/\u003e\n```\n\n### Advanced ui customization\n\n(This options should be used using blade views based on the component default views)\n\nTo use these options, it is recommended to publish the base blade views used by the component and extend their\nbehavior and styling to your liking. To do this, run `php artisan vendor:publish` and export the `livewire-calendar` tag.\n\n- `calendar-view` which can be any `blade.php` view that renders the whole component. It's advised to override this\nview with an altered copy of the base `calendar-view` eg adding a view next to the component.\n\n- `day-view` which can be any `blade.php` view that will be used to render each day of the month. This view will be\ninjected with the following properties: `componentId` (id of the Livewire component)\n, `day` (day of the month as a Carbon instance)\n, `dayInMonth` (if the day is part of the month or not)\n, `isToday` (if the day is today's date)\n, `events` (events collection that correspond to this day)\n\nExample\n\n```blade\n\u003clivewire:appointments-grid\n    calendar-view=\"path/to/view/starting/from/views/folder\"\n    day-view=\"path/to/view/starting/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 onDayClick($year, $month, $day)\n{\n    // This event is triggered when a day is clicked\n    // You will be given the $year, $month and $day for that day\n}\n\npublic function onEventClick($eventId)\n{\n    // This event is triggered when an event card is clicked\n    // You will be given the event id that was clicked\n}\n\npublic function onEventDropped($eventId, $year, $month, $day)\n{\n    // This event will fire when an event is dragged and dropped into another calendar day\n    // You will get the event id, year, month and day where it was dragged to\n}\n```\n\n### Automatic polling\n\nYou can also add automatic polling if needed using `pollMillis` parameters. You can combo with `pollAction` in\norder to call a specific action in your component at the desired polling interval.\n\n### Disabling interactions\n\nBy default click and drag/drop events are enabled. To disable them you can use the following parameters when\nrendering the component\n```blade\n\u003clivewire:appointments-grid\n    :day-click-enabled=\"false\"\n    :event-click-enabled=\"false\"\n    :drag-and-drop-enabled=\"false\"\n/\u003e\n```\n\n### Testing\n\n``` bash\ncomposer test\n```\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 us at info@omnia.church instead of using the issue tracker.\n\n## Credits\n\n- [Osei Quashie](https://github.com/Osimba)\n- [Josh Torres](https://github.com/joshtorres)\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%2Fomnia-digital%2Flivewire-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomnia-digital%2Flivewire-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomnia-digital%2Flivewire-calendar/lists"}