Download the PHP package asantibanez/livewire-calendar without Composer
On this page you can find all versions of the php package asantibanez/livewire-calendar. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download asantibanez/livewire-calendar
More information about asantibanez/livewire-calendar
Files in asantibanez/livewire-calendar
Package livewire-calendar
Short Description Laravel Livewire calendar component
License MIT
Homepage https://github.com/asantibanez/livewire-calendar
Informations about the package livewire-calendar
Livewire Calendar
This package allows you to build a Livewire monthly calendar grid to show events for each day. Events can be loaded from within the component and will be presented on each day depending on the date of the event.
Preview
Installation
You can install the package via composer:
Requirements
This package uses livewire/livewire
(https://laravel-livewire.com/) under the hood.
It also uses TailwindCSS (https://tailwindcss.com/) for base styling.
Please make sure you include both of this dependencies before using this component.
Usage
In order to use this component, you must create a new Livewire component that extends from
LivewireCalendar
You can use make:livewire
to create a new component. For example.
In the AppointmentsCalendar
class, instead of extending from the base Component
Livewire class,
extend from LivewireCalendar
. Also, remove the render
method.
You'll have a class similar to this snippet.
In this class, you must override the following method
In the events()
method, return a collection holding the events that will be displayed on
the calendar. Events must be keyed arrays holding at least the following keys:
id
, title
, description
, date
(date
must be a Carbon\Carbon
instance).
Example
The date
value will be used to determine to what day the event belongs to. To
load values in the events()
method, you can use the following component properties
to filter your events.
startsAt
: starting date of monthendsAt
: ending date of monthgridStartsAt
: starting date of calendar grid. Can be a date from the previous month.endingStartsAt
: ending date of calendar grid. Can be a date from the next month.
Example
Now, we can include our component in any view.
Example
This will render a calendar grid.
By default, the component will render the current month. If you want to change the
starting month, you can set the year
and month
props.
Example
You should include scripts with @livewireCalendarScripts
to enable drag and drop which is turned on by default.
You must include them after @livewireScripts
The component has 3 public methods that can help navigate forward and backward through months:
goToPreviousMonth
goToNextMonth
goToCurrentMonth
You can use these methods on extra views using before-calendar-view
or after-calendar-view
explained below.
Advanced usage
Ui customization
You can customize the behavior of the component with the following properties when rendering on a view:
-
week-starts-at
which can be a number from 0 to 6 according to Carbon days of week to indicate with which day of week the calendar should render first. -
event-view
which can be anyblade.php
view that will be used to render the event card. This view will be injected with a$event
variable holding its data. -
before-calendar-view
andafter-calendar-view
can be anyblade.php
views that can be rendered before or after the calendar itself. These can be used to add extra features to your component using Livewire. -
drag-and-drop-classes
can be any css class used to render the hover effect when dragging an event over each day in the calendar. By default, this value isborder border-blue-400 border-4
day-of-week-view
which can be anyblade.php
view that will be used to render the header of each calendar day. This view will be injected theday
property which is a Carbon instance of the day of the week.
Advanced ui customization
(This options should be used using blade views based on the component default views)
To use these options, it is recommended to publish the base blade views used by the component and extend their
behavior and styling to your liking. To do this, run php artisan vendor:publish
and export the livewire-calendar
tag.
-
calendar-view
which can be anyblade.php
view that renders the whole component. It's advised to override this view with an altered copy of the basecalendar-view
eg adding a view next to the component. day-view
which can be anyblade.php
view that will be used to render each day of the month. This view will be injected with the following properties:componentId
(id of the Livewire component) ,day
(day of the month as a Carbon instance) ,dayInMonth
(if the day is part of the month or not) ,isToday
(if the day is today's date) ,events
(events collection that correspond to this day)
Example
Interaction customization
You can override the following methods to add interactivity to your component
Automatic polling
You can also add automatic polling if needed using pollMillis
parameters. You can combo with pollAction
in
order to call a specific action in your component at the desired polling interval.
Disabling interactions
By default click and drag/drop events are enabled. To disable them you can use the following parameters when rendering the component
Testing
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Credits
- Andrés Santibáñez
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
All versions of livewire-calendar with dependencies
illuminate/support Version ^6.0|^7.0|^8.0|^9.0|^10.0
livewire/livewire Version ^2.0