├── .styleci.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── composer.json
├── config
    └── config.php
├── example.png
├── preview.gif
├── resources
    └── views
    │   ├── calendar.blade.php
    │   ├── day-of-week.blade.php
    │   ├── day.blade.php
    │   └── event.blade.php
└── src
    ├── LivewireCalendar.php
    ├── LivewireCalendarFacade.php
    └── LivewireCalendarServiceProvider.php


/.styleci.yml:
--------------------------------------------------------------------------------
1 | preset: laravel
2 | 
3 | disabled:
4 |   - single_class_element_per_statement
5 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## 2.1.0 - 2021-01-25
 4 | 
 5 | - Added support for PHP 8
 6 | 
 7 | ## 2.0.0 - 2020-10-13
 8 | 
 9 | - Added support for Laravel 8
10 | - Added support for Livewire v2
11 | - Added on/off flag for Day click event
12 | - Added on/off flag for Event click event
13 | - Added on/off flag for Drag and Drop event
14 | - Added ability to automatically poll component with `pollMillis` and `pollAction` parameters
15 | - Added tests 
16 | 
17 | ## 1.0.0 - 2020-05-30
18 | 
19 | - Initial release
20 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Contributions are **welcome** and will be fully **credited**.
 4 | 
 5 | Please read and understand the contribution guide before creating an issue or pull request.
 6 | 
 7 | ## Etiquette
 8 | 
 9 | This project is open source, and as such, the maintainers give their free time to build and maintain the source code
10 | held within. They make the code freely available in the hope that it will be of use to other developers. It would be
11 | extremely unfair for them to suffer abuse or anger for their hard work.
12 | 
13 | Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the
14 | world that developers are civilized and selfless people.
15 | 
16 | It's the duty of the maintainer to ensure that all submissions to the project are of sufficient
17 | quality to benefit the project. Many developers have different skillsets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used.
18 | 
19 | ## Viability
20 | 
21 | When requesting or submitting new features, first consider whether it might be useful to others. Open
22 | source projects are used by many developers, who may have entirely different needs to your own. Think about
23 | whether or not your feature is likely to be used by other users of the project.
24 | 
25 | ## Procedure
26 | 
27 | Before filing an issue:
28 | 
29 | - Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
30 | - Check to make sure your feature suggestion isn't already present within the project.
31 | - Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
32 | - Check the pull requests tab to ensure that the feature isn't already in progress.
33 | 
34 | Before submitting a pull request:
35 | 
36 | - Check the codebase to ensure that your feature doesn't already exist.
37 | - Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
38 | 
39 | ## Requirements
40 | 
41 | If the project maintainer has any additional requirements, you will find them listed here.
42 | 
43 | - **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](https://pear.php.net/package/PHP_CodeSniffer).
44 | 
45 | - **Add tests!** - Your patch won't be accepted if it doesn't have tests.
46 | 
47 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
48 | 
49 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option.
50 | 
51 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
52 | 
53 | - **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
54 | 
55 | **Happy coding**!
56 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Omnia Digital
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Livewire Calendar
  2 | 
  3 | This package allows you to build a Livewire monthly calendar grid to show events for each day. Events can be loaded
  4 | from within the component and will be presented on each day depending on the date of the event.
  5 | 
  6 | Special 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.
  7 | 
  8 | ## Preview
  9 | 
 10 | ![preview](https://github.com/omnia-digital/livewire-calendar/raw/main/preview.gif)
 11 | 
 12 | ## Installation
 13 | 
 14 | You can install the package via composer:
 15 | 
 16 | ```bash
 17 | composer require omnia-digital/livewire-calendar
 18 | ```
 19 | 
 20 | ## Requirements
 21 | 
 22 | This package uses `livewire/livewire` (https://laravel-livewire.com/) under the hood.
 23 | 
 24 | It also uses TailwindCSS (https://tailwindcss.com/) for base styling.
 25 | 
 26 | Please make sure you include both of this dependencies before using this component.
 27 | 
 28 | ## Usage
 29 | 
 30 | In order to use this component, you must create a new Livewire component that extends from
 31 | `LivewireCalendar`
 32 | 
 33 | You can use `make:livewire` to create a new component. For example.
 34 | ``` bash
 35 | php artisan make:livewire AppointmentsCalendar
 36 | ```
 37 | 
 38 | - In the `AppointmentsCalendar` class, instead of extending from the base `Component` Livewire class,
 39 | extend from `LivewireCalendar`. 
 40 | - **Remove the `render` method or you will override the parent and the calendar will not display.**
 41 | - You'll have a class similar to this snippet.
 42 | 
 43 | ``` php
 44 | class AppointmentsCalendar extends LivewireCalendar
 45 | {
 46 |     //
 47 | }
 48 | ```
 49 | 
 50 | In this class, you must override the following method
 51 | 
 52 | ```php
 53 | public function events() : Collection
 54 | {
 55 |     // must return a Laravel collection
 56 | }
 57 | ```
 58 | 
 59 | In the `events()` method, return a collection holding the events that will be displayed on
 60 | the calendar. Events must be keyed arrays holding at least the following keys:
 61 | `id`, `title`, `description`, `date` (`date` must be a `Carbon\Carbon` instance).
 62 | 
 63 | Example
 64 | 
 65 | ```php
 66 | public function events() : Collection
 67 | {
 68 |     return collect([
 69 |         [
 70 |             'id' => 1,
 71 |             'title' => 'Breakfast',
 72 |             'description' => 'Pancakes! 🥞',
 73 |             'date' => Carbon::today(),
 74 |         ],
 75 |         [
 76 |             'id' => 2,
 77 |             'title' => 'Meeting with Pamela',
 78 |             'description' => 'Work stuff',
 79 |             'date' => Carbon::tomorrow(),
 80 |         ],
 81 |     ]);
 82 | }
 83 | ```
 84 | 
 85 | The `date` value will be used to determine to what day the event belongs to. To
 86 | load values in the `events()` method, you can use the following component properties
 87 | to filter your events.
 88 | - `startsAt`: starting date of month
 89 | - `endsAt`: ending date of month
 90 | - `gridStartsAt`: starting date of calendar grid. Can be a date from the previous month.
 91 | - `endingStartsAt`: ending date of calendar grid. Can be a date from the next month.
 92 | 
 93 | Example
 94 | 
 95 | ```php
 96 | public function events(): Collection
 97 | {
 98 |     return Model::query()
 99 |         ->whereDate('scheduled_at', '>=', $this->gridStartsAt)
100 |         ->whereDate('scheduled_at', '<=', $this->gridEndsAt)
101 |         ->get()
102 |         ->map(function (Model $model) {
103 |             return [
104 |                 'id' => $model->id,
105 |                 'title' => $model->title,
106 |                 'description' => $model->notes,
107 |                 'date' => $model->scheduled_at,
108 |             ];
109 |         });
110 | }
111 | ```
112 | 
113 | Now, we can include our component in any view.
114 | 
115 | Example
116 | 
117 | ```blade
118 | <livewire:appointments-calendar/>
119 | ```
120 | 
121 | This will render a calendar grid.
122 | 
123 | By default, the component will render the current month. If you want to change the
124 | starting month, you can set the `initialYear` and `initialMonth` props.
125 | 
126 |  Example
127 | 
128 |  ```blade
129 | <livewire:appointments-calendar
130 |     initialYear="2019"
131 |     initialMonth="12"
132 | />
133 |  ```
134 | 
135 | If you use it as a nested component, you can use variables and make it dynamic (:key prop will force livewire to re-render calendar).
136 | 
137 | Example
138 | 
139 |  ```blade
140 | <livewire:appointments-calendar
141 |     initialYear="{{ $currentYear }}"
142 |     initialMonth="{{ $currentMonth }}"
143 |     :key="$currentYear.$currentMonth"
144 | />
145 |  ```
146 | 
147 | You should include scripts with `@livewireCalendarScripts` to enable drag and drop which is turned on by default.
148 | You must include them after `@livewireScripts`
149 | 
150 | ```blade
151 | @livewireScripts
152 | @livewireCalendarScripts
153 | ```
154 | 
155 | The component has 3 public methods that can help navigate forward and backward through months:
156 | - `goToPreviousMonth`
157 | - `goToNextMonth`
158 | - `goToCurrentMonth`
159 | 
160 | You can use these methods on extra views using `before-calendar-view` or `after-calendar-view` explained below.
161 | 
162 | ### Advanced usage
163 | 
164 | ### Ui customization
165 | 
166 | You can customize the behavior of the component with the following properties when rendering on a view:
167 | 
168 | - `week-starts-at` which can be a number from 0 to 6 according to Carbon days of week to indicate
169 | with which day of week the calendar should render first.
170 | 
171 | - `event-view` which can be any `blade.php` view that will be used to render the event card.
172 | This view will be injected with a `$event` variable holding its data.
173 | 
174 | - `before-calendar-view` and `after-calendar-view` can be any `blade.php` views that can be rendered before or after
175 | the calendar itself. These can be used to add extra features to your component using Livewire.
176 | 
177 | - `drag-and-drop-classes` can be any css class used to render the hover effect when dragging an event over each day
178 | in the calendar. By default, this value is `border border-blue-400 border-4`
179 | 
180 | - `day-of-week-view` which can be any `blade.php` view that will be used to render the header of each calendar day.
181 | This view will be injected the `day` property which is a Carbon instance of the day of the week.
182 | 
183 | ```blade
184 | <livewire:appointments-grid
185 |     week-starts-at="0, 1, 2, 3, 4, 5 or 6. 0 stands for Sunday"
186 |     event-view="path/to/view/starting/from/views/folder"
187 |     day-of-week-view="path/to/view/starting/from/views/folder"
188 |     before-calendar-view="path/to/view/starting/from/views/folder"
189 |     after-calendar-view="path/to/view/starting/from/views/folder"
190 |     drag-and-drop-classes="css classes"
191 | />
192 | ```
193 | 
194 | ### Advanced ui customization
195 | 
196 | (This options should be used using blade views based on the component default views)
197 | 
198 | To use these options, it is recommended to publish the base blade views used by the component and extend their
199 | behavior and styling to your liking. To do this, run `php artisan vendor:publish` and export the `livewire-calendar` tag.
200 | 
201 | - `calendar-view` which can be any `blade.php` view that renders the whole component. It's advised to override this
202 | view with an altered copy of the base `calendar-view` eg adding a view next to the component.
203 | 
204 | - `day-view` which can be any `blade.php` view that will be used to render each day of the month. This view will be
205 | injected with the following properties: `componentId` (id of the Livewire component)
206 | , `day` (day of the month as a Carbon instance)
207 | , `dayInMonth` (if the day is part of the month or not)
208 | , `isToday` (if the day is today's date)
209 | , `events` (events collection that correspond to this day)
210 | 
211 | Example
212 | 
213 | ```blade
214 | <livewire:appointments-grid
215 |     calendar-view="path/to/view/starting/from/views/folder"
216 |     day-view="path/to/view/starting/from/views/folder"
217 | />
218 | ```
219 | 
220 | ### Interaction customization
221 | 
222 | You can override the following methods to add interactivity to your component
223 | 
224 | ```php
225 | public function onDayClick($year, $month, $day)
226 | {
227 |     // This event is triggered when a day is clicked
228 |     // You will be given the $year, $month and $day for that day
229 | }
230 | 
231 | public function onEventClick($eventId)
232 | {
233 |     // This event is triggered when an event card is clicked
234 |     // You will be given the event id that was clicked
235 | }
236 | 
237 | public function onEventDropped($eventId, $year, $month, $day)
238 | {
239 |     // This event will fire when an event is dragged and dropped into another calendar day
240 |     // You will get the event id, year, month and day where it was dragged to
241 | }
242 | ```
243 | 
244 | ### Automatic polling
245 | 
246 | You can also add automatic polling if needed using `pollMillis` parameters. You can combo with `pollAction` in
247 | order to call a specific action in your component at the desired polling interval.
248 | 
249 | ### Disabling interactions
250 | 
251 | By default click and drag/drop events are enabled. To disable them you can use the following parameters when
252 | rendering the component
253 | ```blade
254 | <livewire:appointments-grid
255 |     :day-click-enabled="false"
256 |     :event-click-enabled="false"
257 |     :drag-and-drop-enabled="false"
258 | />
259 | ```
260 | 
261 | ### Testing
262 | 
263 | ``` bash
264 | composer test
265 | ```
266 | 
267 | ### Changelog
268 | 
269 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
270 | 
271 | ## Contributing
272 | 
273 | Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
274 | 
275 | ### Security
276 | 
277 | If you discover any security related issues, please email us at info@omniadigital.io instead of using the issue tracker.
278 | 
279 | ## Credits
280 | 
281 | - [Osei Quashie](https://github.com/Osimba)
282 | - [Josh Torres](https://github.com/joshtorres)
283 | - [Andrés Santibáñez](https://github.com/asantibanez)
284 | - [All Contributors](../../contributors)
285 | 
286 | ## License
287 | 
288 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
289 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "omnia-digital/livewire-calendar",
 3 |     "description": "Laravel Livewire calendar component",
 4 |     "keywords": [
 5 |         "omnia",
 6 |         "omnia-digital",
 7 |         "livewire-calendar"
 8 |     ],
 9 |     "homepage": "https://github.com/omnia-digital/livewire-calendar",
10 |     "license": "MIT",
11 |     "type": "library",
12 |     "authors": [
13 |         {
14 |             "name": "Josh Torres",
15 |             "email": "josht@omniadigital.io",
16 |             "role": "Developer"
17 |         },
18 |         {
19 |             "name": "Andrés Santibáñez",
20 |             "email": "santibanez.andres@gmail.com",
21 |             "role": "Developer"
22 |         },
23 |         {
24 |             "name": "Osei Quashie",
25 |             "email": "osei@omniadigital.io",
26 |             "role": "Developer"
27 |         }
28 |     ],
29 |     "require": {
30 |         "php": "^7.2|^8.0|^8.1|^8.2",
31 |         "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0|^11.0|^12.0",
32 |         "livewire/livewire": "^2.0||^3.0"
33 |     },
34 |     "require-dev": {
35 |         "orchestra/testbench": "^5.0|^6.0",
36 |         "phpunit/phpunit": "^8.0|^9.0|^10.0|^11.0|^12.0"
37 |     },
38 |     "autoload": {
39 |         "psr-4": {
40 |             "Omnia\\LivewireCalendar\\": "src"
41 |         }
42 |     },
43 |     "autoload-dev": {
44 |         "psr-4": {
45 |             "Omnia\\LivewireCalendar\\Tests\\": "tests"
46 |         }
47 |     },
48 |     "scripts": {
49 |         "test": "vendor/bin/phpunit",
50 |         "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
51 | 
52 |     },
53 |     "config": {
54 |         "sort-packages": true
55 |     },
56 |     "extra": {
57 |         "laravel": {
58 |             "providers": [
59 |                 "Omnia\\LivewireCalendar\\LivewireCalendarServiceProvider"
60 |             ],
61 |             "aliases": {
62 |                 "LivewireCalendar": "Omnia\\LivewireCalendar\\LivewireCalendarFacade"
63 |             }
64 |         }
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/config/config.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | /*
4 |  * You can place your custom package configuration in here.
5 |  */
6 | return [
7 | 
8 | ];


--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omnia-digital/livewire-calendar/42d8bcca5d5ac14b7c4620c4386b695b701ac670/example.png


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/omnia-digital/livewire-calendar/42d8bcca5d5ac14b7c4620c4386b695b701ac670/preview.gif


--------------------------------------------------------------------------------
/resources/views/calendar.blade.php:
--------------------------------------------------------------------------------
 1 | <div
 2 |     @if($pollMillis !== null && $pollAction !== null)
 3 |         wire:poll.{{ $pollMillis }}ms="{{ $pollAction }}"
 4 |     @elseif($pollMillis !== null)
 5 |         wire:poll.{{ $pollMillis }}ms
 6 |     @endif
 7 | >
 8 |     <div>
 9 |         @includeIf($beforeCalendarView)
10 |     </div>
11 | 
12 |     <div class="flex">
13 |         <div class="overflow-x-auto w-full">
14 |             <div class="inline-block min-w-full overflow-hidden">
15 | 
16 |                 <div class="w-full flex flex-row">
17 |                     @foreach($monthGrid->first() as $day)
18 |                         @include($dayOfWeekView, ['day' => $day])
19 |                     @endforeach
20 |                 </div>
21 | 
22 |                 @foreach($monthGrid as $week)
23 |                     <div class="w-full flex flex-row">
24 |                         @foreach($week as $day)
25 |                             @include($dayView, [
26 |                                     'componentId' => $componentId,
27 |                                     'day' => $day,
28 |                                     'dayInMonth' => $day->isSameMonth($startsAt),
29 |                                     'isToday' => $day->isToday(),
30 |                                     'events' => $getEventsForDay($day, $events),
31 |                                 ])
32 |                         @endforeach
33 |                     </div>
34 |                 @endforeach
35 |             </div>
36 |         </div>
37 |     </div>
38 | 
39 |     <div>
40 |         @includeIf($afterCalendarView)
41 |     </div>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/resources/views/day-of-week.blade.php:
--------------------------------------------------------------------------------
1 | <div class="flex-1 h-12 border -mt-px -ml-px flex items-center justify-center bg-indigo-100 text-gray-900"
2 |      style="min-width: 10rem;">
3 | 
4 |     <p class="text-sm">
5 |         {{ $day->format('l') }}
6 |     </p>
7 | 
8 | </div>
9 | 


--------------------------------------------------------------------------------
/resources/views/day.blade.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <div
 3 |     ondragenter="onLivewireCalendarEventDragEnter(event, '{{ $componentId }}', '{{ $day }}', '{{ $dragAndDropClasses }}');"
 4 |     ondragleave="onLivewireCalendarEventDragLeave(event, '{{ $componentId }}', '{{ $day }}', '{{ $dragAndDropClasses }}');"
 5 |     ondragover="onLivewireCalendarEventDragOver(event);"
 6 |     ondrop="onLivewireCalendarEventDrop(event, '{{ $componentId }}', '{{ $day }}', {{ $day->year }}, {{ $day->month }}, {{ $day->day }}, '{{ $dragAndDropClasses }}');"
 7 |     class="flex-1 h-40 lg:h-48 border border-gray-200 -mt-px -ml-px"
 8 |     style="min-width: 10rem;">
 9 | 
10 |     {{-- Wrapper for Drag and Drop --}}
11 |     <div
12 |         class="w-full h-full"
13 |         id="{{ $componentId }}-{{ $day }}">
14 | 
15 |         <div
16 |             @if($dayClickEnabled)
17 |                 wire:click="onDayClick({{ $day->year }}, {{ $day->month }}, {{ $day->day }})"
18 |             @endif
19 |             class="w-full h-full p-2 {{ $dayInMonth ? $isToday ? 'bg-yellow-100' : ' bg-white ' : 'bg-gray-100' }} flex flex-col">
20 | 
21 |             {{-- Number of Day --}}
22 |             <div class="flex items-center">
23 |                 <p class="text-sm {{ $dayInMonth ? ' font-medium ' : '' }}">
24 |                     {{ $day->format('j') }}
25 |                 </p>
26 |                 <p class="text-xs text-gray-600 ml-4">
27 |                     @if($events->isNotEmpty())
28 |                         {{ $events->count() }} {{ Str::plural('event', $events->count()) }}
29 |                     @endif
30 |                 </p>
31 |             </div>
32 | 
33 |             {{-- Events --}}
34 |             <div class="p-2 my-2 flex-1 overflow-y-auto">
35 |                 <div class="grid grid-cols-1 grid-flow-row gap-2">
36 |                     @foreach($events as $event)
37 |                         <div
38 |                             @if($dragAndDropEnabled)
39 |                                 draggable="true"
40 |                             @endif
41 |                             ondragstart="onLivewireCalendarEventDragStart(event, '{{ $event['id'] }}')">
42 |                             @include($eventView, [
43 |                                 'event' => $event,
44 |                             ])
45 |                         </div>
46 |                     @endforeach
47 |                 </div>
48 |             </div>
49 | 
50 |         </div>
51 |     </div>
52 | </div>
53 | 


--------------------------------------------------------------------------------
/resources/views/event.blade.php:
--------------------------------------------------------------------------------
 1 | <div
 2 |     @if($eventClickEnabled)
 3 |         wire:click.stop="onEventClick('{{ $event['id']  }}')"
 4 |     @endif
 5 |     class="bg-white rounded-lg border py-2 px-3 shadow-md cursor-pointer">
 6 | 
 7 |     <p class="text-sm font-medium">
 8 |         {{ $event['title'] }}
 9 |     </p>
10 |     <p class="mt-2 text-xs">
11 |         {{ $event['description'] ?? 'No description' }}
12 |     </p>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/LivewireCalendar.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | namespace Omnia\LivewireCalendar;
  4 | 
  5 | use Carbon\Carbon;
  6 | use Exception;
  7 | use Illuminate\Contracts\View\Factory;
  8 | use Illuminate\Support\Collection;
  9 | use Illuminate\View\View;
 10 | use Livewire\Component;
 11 | 
 12 | /**
 13 |  * Class LivewireCalendar
 14 |  * @package Omnia\LivewireCalendar
 15 |  * @property Carbon $startsAt
 16 |  * @property Carbon $endsAt
 17 |  * @property Carbon $gridStartsAt
 18 |  * @property Carbon $gridEndsAt
 19 |  * @property int $weekStartsAt
 20 |  * @property int $weekEndsAt
 21 |  * @property string $calendarView
 22 |  * @property string $dayView
 23 |  * @property string $eventView
 24 |  * @property string $dayOfWeekView
 25 |  * @property string $beforeCalendarWeekView
 26 |  * @property string $afterCalendarWeekView
 27 |  * @property string $dragAndDropClasses
 28 |  * @property int $pollMillis
 29 |  * @property string $pollAction
 30 |  * @property boolean $dragAndDropEnabled
 31 |  * @property boolean $dayClickEnabled
 32 |  * @property boolean $eventClickEnabled
 33 |  */
 34 | class LivewireCalendar extends Component
 35 | {
 36 |     public $startsAt;
 37 |     public $endsAt;
 38 | 
 39 |     public $gridStartsAt;
 40 |     public $gridEndsAt;
 41 | 
 42 |     public $weekStartsAt;
 43 |     public $weekEndsAt;
 44 | 
 45 |     public $calendarView;
 46 |     public $dayView;
 47 |     public $eventView;
 48 |     public $dayOfWeekView;
 49 | 
 50 |     public $dragAndDropClasses;
 51 | 
 52 |     public $beforeCalendarView;
 53 |     public $afterCalendarView;
 54 | 
 55 |     public $pollMillis;
 56 |     public $pollAction;
 57 | 
 58 |     public $dragAndDropEnabled;
 59 |     public $dayClickEnabled;
 60 |     public $eventClickEnabled;
 61 | 
 62 |     protected $casts = [
 63 |         'startsAt' => 'date',
 64 |         'endsAt' => 'date',
 65 |         'gridStartsAt' => 'date',
 66 |         'gridEndsAt' => 'date',
 67 |     ];
 68 | 
 69 |     public function mount($initialYear = null,
 70 |                           $initialMonth = null,
 71 |                           $weekStartsAt = null,
 72 |                           $calendarView = null,
 73 |                           $dayView = null,
 74 |                           $eventView = null,
 75 |                           $dayOfWeekView = null,
 76 |                           $dragAndDropClasses = null,
 77 |                           $beforeCalendarView = null,
 78 |                           $afterCalendarView = null,
 79 |                           $pollMillis = null,
 80 |                           $pollAction = null,
 81 |                           $dragAndDropEnabled = true,
 82 |                           $dayClickEnabled = true,
 83 |                           $eventClickEnabled = true,
 84 |                           $extras = [])
 85 |     {
 86 |         $this->weekStartsAt = $weekStartsAt ?? Carbon::SUNDAY;
 87 |         $this->weekEndsAt = $this->weekStartsAt == Carbon::SUNDAY
 88 |             ? Carbon::SATURDAY
 89 |             : collect([0,1,2,3,4,5,6])->get($this->weekStartsAt + 6 - 7)
 90 |         ;
 91 | 
 92 |         $initialYear = $initialYear ?? Carbon::today()->year;
 93 |         $initialMonth = $initialMonth ?? Carbon::today()->month;
 94 | 
 95 |         $this->startsAt = Carbon::createFromDate($initialYear, $initialMonth, 1)->startOfDay();
 96 |         $this->endsAt = $this->startsAt->clone()->endOfMonth()->startOfDay();
 97 | 
 98 |         $this->calculateGridStartsEnds();
 99 | 
100 |         $this->setupViews($calendarView, $dayView, $eventView, $dayOfWeekView, $beforeCalendarView, $afterCalendarView);
101 | 
102 |         $this->setupPoll($pollMillis, $pollAction);
103 | 
104 |         $this->dragAndDropEnabled = $dragAndDropEnabled;
105 |         $this->dragAndDropClasses = $dragAndDropClasses ?? 'border border-blue-400 border-4';
106 | 
107 |         $this->dayClickEnabled = $dayClickEnabled;
108 |         $this->eventClickEnabled = $eventClickEnabled;
109 | 
110 |         $this->afterMount($extras);
111 |     }
112 | 
113 |     public function afterMount($extras = [])
114 |     {
115 |         //
116 |     }
117 | 
118 |     public function setupViews($calendarView = null,
119 |                                $dayView = null,
120 |                                $eventView = null,
121 |                                $dayOfWeekView = null,
122 |                                $beforeCalendarView = null,
123 |                                $afterCalendarView = null)
124 |     {
125 |         $this->calendarView = $calendarView ?? 'livewire-calendar::calendar';
126 |         $this->dayView = $dayView ?? 'livewire-calendar::day';
127 |         $this->eventView = $eventView ?? 'livewire-calendar::event';
128 |         $this->dayOfWeekView = $dayOfWeekView ?? 'livewire-calendar::day-of-week';
129 | 
130 |         $this->beforeCalendarView = $beforeCalendarView ?? null;
131 |         $this->afterCalendarView = $afterCalendarView ?? null;
132 |     }
133 | 
134 |     public function setupPoll($pollMillis, $pollAction)
135 |     {
136 |         $this->pollMillis = $pollMillis;
137 |         $this->pollAction = $pollAction;
138 |     }
139 | 
140 |     public function goToPreviousMonth()
141 |     {
142 |         $this->startsAt->subMonthNoOverflow();
143 |         $this->endsAt->subMonthNoOverflow();
144 | 
145 |         $this->calculateGridStartsEnds();
146 |     }
147 | 
148 |     public function goToNextMonth()
149 |     {
150 |         $this->startsAt->addMonthNoOverflow();
151 |         $this->endsAt->addMonthNoOverflow();
152 | 
153 |         $this->calculateGridStartsEnds();
154 |     }
155 | 
156 |     public function goToCurrentMonth()
157 |     {
158 |         $this->startsAt = Carbon::today()->startOfMonth()->startOfDay();
159 |         $this->endsAt = $this->startsAt->clone()->endOfMonth()->startOfDay();
160 | 
161 |         $this->calculateGridStartsEnds();
162 |     }
163 | 
164 |     public function calculateGridStartsEnds()
165 |     {
166 |         $this->gridStartsAt = $this->startsAt->clone()->startOfWeek($this->weekStartsAt)->shiftTimezone(config('app.timezone'));;
167 |         $this->gridEndsAt = $this->endsAt->clone()->endOfWeek($this->weekEndsAt)->shiftTimezone(config('app.timezone'));;
168 |     }
169 | 
170 |     /**
171 |      * @throws Exception
172 |      */
173 |     public function monthGrid()
174 |     {
175 |         $firstDayOfGrid = $this->gridStartsAt;
176 |         $lastDayOfGrid = $this->gridEndsAt;
177 | 
178 |         $numbersOfWeeks = floor(abs($firstDayOfGrid->diffInWeeks($lastDayOfGrid)) + 1);
179 |         $days = floor(abs($firstDayOfGrid->diffInDays($lastDayOfGrid)) + 1);
180 | 
181 |         if ($days % 7 != 0) {
182 |             throw new Exception("Livewire Calendar not correctly configured. Check initial inputs.");
183 |         }
184 | 
185 |         $monthGrid = collect();
186 |         $currentDay = $firstDayOfGrid->clone();
187 | 
188 |         while(!$currentDay->greaterThan($lastDayOfGrid)) {
189 |             $monthGrid->push($currentDay->clone());
190 |             $currentDay->addDay();
191 |         }
192 | 
193 |         $monthGrid = $monthGrid->chunk(7);
194 |         if ($numbersOfWeeks != $monthGrid->count()) {
195 |             throw new Exception("Livewire Calendar calculated wrong number of weeks. Sorry :(");
196 |         }
197 | 
198 |         return $monthGrid;
199 |     }
200 | 
201 |     public function events() : Collection
202 |     {
203 |         return collect();
204 |     }
205 | 
206 |     public function getEventsForDay($day, Collection $events) : Collection
207 |     {
208 |         return $events
209 |             ->filter(function ($event) use ($day) {
210 |                 return Carbon::parse($event['date'])->isSameDay($day);
211 |             });
212 |     }
213 | 
214 |     public function onDayClick($year, $month, $day)
215 |     {
216 |         //
217 |     }
218 | 
219 |     public function onEventClick($eventId)
220 |     {
221 |         //
222 |     }
223 | 
224 |     public function onEventDropped($eventId, $year, $month, $day)
225 |     {
226 |         //
227 |     }
228 | 
229 |     public function getId()
230 |     {
231 |         if (!empty($this->__id)) {
232 |             $id = $this->__id;
233 |         } else if (!empty($this->id)) {
234 |             $id = $this->id;
235 |         } else {
236 |             $id = 'livewire-calendar-' . uniqid();
237 |         }
238 |         return $id;
239 |     }
240 | 
241 |     /**
242 |      * @return Factory|View
243 |      * @throws Exception
244 |      */
245 |     public function render()
246 |     {
247 |         $events = $this->events();
248 | 
249 |         return view($this->calendarView)
250 |             ->with([
251 |                 'componentId' => $this->getId(),
252 |                 'monthGrid' => $this->monthGrid(),
253 |                 'events' => $events,
254 |                 'getEventsForDay' => function ($day) use ($events) {
255 |                     return $this->getEventsForDay($day, $events);
256 |                 }
257 |             ]);
258 |     }
259 | }
260 | 


--------------------------------------------------------------------------------
/src/LivewireCalendarFacade.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Omnia\LivewireCalendar;
 4 | 
 5 | use Illuminate\Support\Facades\Facade;
 6 | 
 7 | /**
 8 |  * @see \Omnia\LivewireCalendar\Skeleton\SkeletonClass
 9 |  */
10 | class LivewireCalendarFacade extends Facade
11 | {
12 |     /**
13 |      * Get the registered name of the component.
14 |      *
15 |      * @return string
16 |      */
17 |     protected static function getFacadeAccessor()
18 |     {
19 |         return 'livewire-calendar';
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/LivewireCalendarServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Omnia\LivewireCalendar;
 4 | 
 5 | use Illuminate\Support\Facades\Blade;
 6 | use Illuminate\Support\ServiceProvider;
 7 | 
 8 | class LivewireCalendarServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * Bootstrap the application services.
12 |      */
13 |     public function boot()
14 |     {
15 |         $this->app->bind('livewire-calendar', function () {
16 |             return new LivewireCalendar();
17 |         });
18 | 
19 |         $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-calendar');
20 | 
21 |         if ($this->app->runningInConsole()) {
22 |             $this->publishes([
23 |                 __DIR__.'/../resources/views' => $this->app->resourcePath('views/vendor/livewire-calendar'),
24 |             ], 'livewire-calendar');
25 |         }
26 | 
27 |         Blade::directive('livewireCalendarScripts', function () {
28 |             return <<<'HTML'
29 |             <script>
30 |                 function onLivewireCalendarEventDragStart(event, eventId) {
31 |                     event.dataTransfer.setData('id', eventId);
32 |                 }
33 | 
34 |                 function onLivewireCalendarEventDragEnter(event, componentId, dateString, dragAndDropClasses) {
35 |                     event.stopPropagation();
36 |                     event.preventDefault();
37 | 
38 |                     let element = document.getElementById(`${componentId}-${dateString}`);
39 |                     element.className = element.className + ` ${dragAndDropClasses} `;
40 |                 }
41 | 
42 |                 function onLivewireCalendarEventDragLeave(event, componentId, dateString, dragAndDropClasses) {
43 |                     event.stopPropagation();
44 |                     event.preventDefault();
45 | 
46 |                     let element = document.getElementById(`${componentId}-${dateString}`);
47 |                     element.className = element.className.replace(dragAndDropClasses, '');
48 |                 }
49 | 
50 |                 function onLivewireCalendarEventDragOver(event) {
51 |                     event.stopPropagation();
52 |                     event.preventDefault();
53 |                 }
54 | 
55 |                 function onLivewireCalendarEventDrop(event, componentId, dateString, year, month, day, dragAndDropClasses) {
56 |                     event.stopPropagation();
57 |                     event.preventDefault();
58 | 
59 |                     let element = document.getElementById(`${componentId}-${dateString}`);
60 |                     element.className = element.className.replace(dragAndDropClasses, '');
61 | 
62 |                     const eventId = event.dataTransfer.getData('id');
63 | 
64 |                     window.Livewire.find(componentId).call('onEventDropped', eventId, year, month, day);
65 |                 }
66 |             </script>
67 | HTML;
68 |         });
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------