PHPackages da-sie/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. [Utility & Helpers](/categories/utility) 4. / 5. da-sie/livewire-calendar ActiveLibrary[Utility & Helpers](/categories/utility) da-sie/livewire-calendar ======================== Laravel Livewire calendar component with month/week/day views, drag-and-drop, multi-day events, and accessibility 3.0.0(3mo ago)02MITPHPPHP ^8.2 Since May 30Pushed 3mo agoCompare [ Source](https://github.com/da-sie/livewire-calendar)[ Packagist](https://packagist.org/packages/da-sie/livewire-calendar)[ Docs](https://github.com/da-sie/livewire-calendar)[ RSS](/packages/da-sie-livewire-calendar/feed)WikiDiscussions master Synced 1w ago READMEChangelogDependencies (4)Versions (8)Used By (0) Livewire Calendar ================= [](#livewire-calendar) A Laravel Livewire calendar component with month, week, and day views. Supports multi-day events, drag-and-drop, keyboard navigation, and full accessibility (ARIA). > **Fork of [asantibanez/livewire-calendar](https://github.com/asantibanez/livewire-calendar)**, modernized for Livewire 4, Laravel 11-13, and PHP 8.2+. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11, 12, or 13 - Livewire 4 - TailwindCSS (for default styling) Installation ------------ [](#installation) ``` composer require da-sie/livewire-calendar ``` Quick Start ----------- [](#quick-start) Create a Livewire component that extends `LivewireCalendar`: ``` php artisan make:livewire AppointmentsCalendar ``` ``` use Asantibanez\LivewireCalendar\LivewireCalendar; use Illuminate\Support\Collection; use Carbon\Carbon; class AppointmentsCalendar extends LivewireCalendar { public function events(): Collection { return collect([ [ 'id' => 1, 'title' => 'Breakfast', 'description' => 'Pancakes!', 'date' => Carbon::today(), ], [ 'id' => 2, 'title' => 'Meeting', 'description' => 'Work stuff', 'date' => Carbon::tomorrow(), ], ]); } } ``` Include in a Blade view: ``` ``` Add the drag-and-drop scripts after Livewire's scripts: ``` @livewireCalendarScripts ``` Event Format ------------ [](#event-format) Events are keyed arrays with these fields: KeyTypeRequiredDescription`id`mixedyesUnique identifier`title`stringyesDisplay title`description`stringnoDescription text`date`Carbon/stringyesStart date`date_end`Carbon/stringnoEnd date (inclusive) for multi-day events### Multi-Day Events [](#multi-day-events) Add `date_end` to make an event span multiple days: ``` [ 'id' => 1, 'title' => 'Conference', 'description' => 'Annual tech conference', 'date' => '2026-04-08', 'date_end' => '2026-04-10', ] ``` Multi-day events display across all days in their range. The title shows on the start day; continuation days show a compact indicator. Events without `date_end` behave as single-day events. **Loading multi-day events:** If your events can start before the visible grid, use an overlap query: ``` public function events(): Collection { return Event::query() ->whereDate('date', '=', $this->gridStartsAt) ->orWhereNull('date_end'); }) ->get() ->map(fn (Event $e) => [ 'id' => $e->id, 'title' => $e->title, 'description' => $e->notes, 'date' => $e->date, 'date_end' => $e->date_end, ]); } ``` View Modes ---------- [](#view-modes) The calendar supports three view modes: `month` (default), `week`, and `day`. ``` ``` ### Switching Views [](#switching-views) Call `setViewMode()` from your component or a custom view: ``` $this->setViewMode('week'); // 'month', 'week', 'day' ``` Or from Blade via `wire:click`: ``` Month Week Day ``` ### Navigation [](#navigation) MethodDescription`goToPreviousMonth`Navigate to previous month`goToNextMonth`Navigate to next month`goToCurrentMonth`Navigate to current month`goToPreviousWeek`Navigate to previous week`goToNextWeek`Navigate to next week`goToPreviousDay`Navigate to previous day`goToNextDay`Navigate to next dayUse `before-calendar-view` or `after-calendar-view` to add navigation controls. ### Filtering Properties [](#filtering-properties) Use these properties in `events()` to filter your data: PropertyDescription`$this->startsAt`Start of the visible period`$this->endsAt`End of the visible period`$this->gridStartsAt`Start of the grid (may include adjacent days)`$this->gridEndsAt`End of the gridIn day mode, `gridStartsAt` and `gridEndsAt` match the single visible day. In week mode, they match the visible week. Customization ------------- [](#customization) ### Component Props [](#component-props) ``` ``` ### Publishing Views [](#publishing-views) ``` php artisan vendor:publish --tag=livewire-calendar ``` Published views receive these variables: **`day` view:** `$componentId`, `$day`, `$dayInMonth`, `$isToday`, `$events`, `$viewMode` **`event` view:** `$event`, `$isStart`, `$isEnd`, `$eventClickEnabled`, `$dragAndDropEnabled` ### Publishing Assets [](#publishing-assets) To use the JS file directly (instead of `@livewireCalendarScripts`): ``` php artisan vendor:publish --tag=livewire-calendar-assets ``` Then include manually: ``` ``` Interactions ------------ [](#interactions) Override these methods in your component: ``` public function onDayClick($year, $month, $day) { // Triggered when a day cell is clicked } public function onEventClick($eventId) { // Triggered when an event is clicked } public function onEventDropped($eventId, $year, $month, $day) { // Triggered when an event is dragged and dropped to another day // $year/$month/$day = target day } ``` ### Multi-Day Drag Source [](#multi-day-drag-source) For multi-day events, you may need to know which day segment was dragged. Listen for the `calendar-event-dropped` Livewire event: ``` use Livewire\Attributes\On; #[On('calendar-event-dropped')] public function handleEventDrop($eventId, $targetYear, $targetMonth, $targetDay, $sourceYear, $sourceMonth, $sourceDay) { $event = Event::find($eventId); // Calculate how many days the event was moved $source = Carbon::create($sourceYear, $sourceMonth, $sourceDay); $target = Carbon::create($targetYear, $targetMonth, $targetDay); $diff = $source->diffInDays($target, false); // Shift both start and end dates by the same offset $event->update([ 'date' => Carbon::parse($event->date)->addDays($diff), 'date_end' => $event->date_end ? Carbon::parse($event->date_end)->addDays($diff) : null, ]); } ``` Accessibility ------------- [](#accessibility) The calendar includes full ARIA support: - `role="grid"` on the calendar, `role="gridcell"` on day cells, `role="columnheader"` on day-of-week headers - `aria-label` on days (e.g. "April 8, 2026") and events - **Keyboard navigation:** Arrow keys move between day cells, Enter/Space triggers day click - **Event keyboard:** Enter/Space triggers event click when enabled - `aria-live="polite"` region for screen reader announcements - `role="button"` and `tabindex="0"` on clickable events only Testing ------- [](#testing) ``` composer test ``` Credits ------- [](#credits) - [Andres Santibanez](https://github.com/asantibanez) (original author) - [All Contributors](../../contributors) License ------- [](#license) MIT. See [LICENSE.md](LICENSE.md). ### Health Score 44 — FairBetter than 90% of packages Maintenance80 Actively maintained with recent releases Popularity2 Limited adoption so far Community11 Small or concentrated contributor base Maturity73 Established project with proven stability Bus Factor1 Top contributor holds 83% 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 ~427 days Recently: every ~500 days Total 6 Last Release 107d ago Major Versions 1.0.0 → 2.0.02020-10-14 2.3.0 → 3.0.02026-04-08 PHP version history (5 changes)1.0.0PHP ^7.2 2.1.0PHP ^7.2|^8.0 2.2.0PHP ^7.2|^8.0|^8.1|^8.2 2.3.0PHP ^7.2|^8.0|^8.1|^8.2|^8.3 3.0.0PHP ^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/459266?v=4)[Przemysław](/maintainers/da-sie)[@da-sie](https://github.com/da-sie) --- Top Contributors [![asantibanez](https://avatars.githubusercontent.com/u/5126648?v=4)](https://github.com/asantibanez "asantibanez (39 commits)")[![da-sie](https://avatars.githubusercontent.com/u/459266?v=4)](https://github.com/da-sie "da-sie (4 commits)")[![shanerbaner82](https://avatars.githubusercontent.com/u/5580860?v=4)](https://github.com/shanerbaner82 "shanerbaner82 (2 commits)")[![barryvdh](https://avatars.githubusercontent.com/u/973269?v=4)](https://github.com/barryvdh "barryvdh (1 commits)")[![Godcharx](https://avatars.githubusercontent.com/u/34008713?v=4)](https://github.com/Godcharx "Godcharx (1 commits)") --- Tags livewirecalendarlivewire-calendarda-sie ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/da-sie-livewire-calendar/health.svg) ``` [![Health](https://phpackages.com/badges/da-sie-livewire-calendar/health.svg)](https://phpackages.com/packages/da-sie-livewire-calendar) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9577.8M138](/packages/livewire-flux)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 728176.2k14](/packages/tallstackui-tallstackui)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.4k](/packages/tomshaw-electricgrid)[venturedrake/laravel-crm A free open source CRM built as a package for laravel projects 44611.3k](/packages/venturedrake-laravel-crm)[mati365/ckeditor5-livewire CKEditor 5 integration for Laravel Livewire 447.9k](/packages/mati365-ckeditor5-livewire)[noerd/noerd 101.4k10](/packages/noerd-noerd) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)