PHPackages                             brickx/calendax - 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. brickx/calendax

AbandonedArchivedPackage[Utility & Helpers](/categories/utility)

brickx/calendax
===============

Livewire calendar for Laravel

1.1.0(3y ago)1501[1 PRs](https://github.com/Keysaw/calendax/pulls)MITPHPPHP ^8.1

Since Aug 7Pushed 2y ago1 watchersCompare

[ Source](https://github.com/Keysaw/calendax)[ Packagist](https://packagist.org/packages/brickx/calendax)[ Docs](https://github.com/brickx/calendax)[ RSS](/packages/brickx-calendax/feed)WikiDiscussions master Synced 4d ago

READMEChangelog (2)Dependencies (11)Versions (4)Used By (0)

Livewire calendar for Laravel
=============================

[](#livewire-calendar-for-laravel)

[![Latest Version on Packagist](https://camo.githubusercontent.com/ec998585e17f88d2bdad4dccdddc76ae5ce55f4cd1c35e212fcd6ac701cc22a4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b65797361772f63616c656e6461782e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/brickx/calendax)[![GitHub Tests Action Status](https://camo.githubusercontent.com/cdb9c2ad94a270d043f95b985baf8ef40ecc2e912e51eba75e193740c04f29ef/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6b65797361772f63616c656e6461782f72756e2d74657374733f6c6162656c3d5465737473)](https://github.com/keysaw/calendax/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/b67d0473ad2313861a6288cc3c3bb86a6041ca64923ede6418a629828734c5c6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6b65797361772f63616c656e6461782f50696e743f6c6162656c3d636f64652532307374796c65)](https://github.com/keysaw/calendax/actions?query=workflow%3A%22Pint%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/5eba362b5bf1d484cd9b4d53b2ba08736271cf0102c2cee9ab37a84794edaacc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b65797361772f63616c656e6461782e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/keysaw/calendax)

> **NOTE**: This package is intended for my own use only, so a few things are very specific to my projects (e.g. importing `.tsx` & `.scss` uncompiled files directly).
>
> If anyone is interested in making it easier to set up and more maintainable for a wider audience, please submit a PR or open a discussion!
>
> Also, feel free to consider using the package on which this one is based as stated below.

Calendax allows you to build a Livewire calendar, filled with events of any kind. Events can be created from any model or dataset.

It is heavily inspired by Andrés Santibáñez's [Livewire Calendar](https://github.com/asantibanez/livewire-calendar).

Preview
-------

[](#preview)

[![preview](https://github.com/Keysaw/calendax/raw/master/preview.gif)](https://github.com/Keysaw/calendax/raw/master/preview.gif)

Table of contents
-----------------

[](#table-of-contents)

- [Installation](#installation)
- [Requirements](#requirements)
- [Usage](#usage)
    - [Initialization](#initialization)
    - [Loading events (using arrays)](#loading-events-using-arrays)
    - [Loading events (using Eloquent query)](#loading-events-using-eloquent-query)
    - [Rendering the calendar](#rendering-the-calendar)
    - [Choosing the starting month](#choosing-the-starting-month)
    - [Enabling drag & drop](#enabling-drag--drop)
    - [Handling navigation](#handling-navigation)
- [Advanced usage](#advanced-usage)
    - [Blade customization](#blade-customization)
    - [Custom views](#custom-views)
    - [Interactivity](#interactivity)
    - [Automatic polling](#automatic-polling)
- [Flatpickr](#flatpickr)
    - [Importing](#importing)
    - [Customization](#customization)
- [Testing](#testing)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require brickx/calendax
```

You can publish the config file with:

```
php artisan vendor:publish --tag="calendax-config"
```

This is the contents of the published config file:

```
return [

];
```

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="calendax-views"
```

Requirements
------------

[](#requirements)

This package uses `livewire/livewire` () under the hood.

It also uses TailwindCSS () for styling. Please make sure you include both of these dependencies before using this component.

Usage
-----

[](#usage)

### Initialization

[](#initialization)

First, create a new Livewire component that extends `Calendax`.

You can use `make:livewire` to create this component. For example:

```
php artisan make:livewire MyCalendar
```

Then, in the created `MyCalendar` class, extend `Calendax` instead of extending from the base `Component` Livewire class:

```
class MyCalendar extends \Brickx\Calendax\Calendax
{
    //
}
```

In this class, you must override the following method in order to implement custom logic for loading events:

```
public function events() : Collection
{
    // Return a Laravel collection
}
```

Also remove the `render` method, as it will be handled for you.

In the `events()` method, you should return a collection containing the events that should be displayed on the calendar.

### Loading events (using arrays)

[](#loading-events-using-arrays)

Events must be keyed arrays holding at least the following keys: `id`, `title`, `description`, `date` (which must be a `Carbon\Carbon` instance).

```
public function events() : Collection
{
    return collect([
        [
            'id' => 1,
            'title' => 'Breakfast',
            'description' => 'Pancakes! 🥞',
            'date' => Carbon::today(),
        ],
        [
            'id' => 2,
            'title' => 'Meeting with Camille',
            'description' => 'Random chit-chat.',
            'date' => Carbon::tomorrow(),
        ],
    ]);
}
```

The `date` value will be used to determine to which day the event will be displayed.

### Loading events (using Eloquent query)

[](#loading-events-using-eloquent-query)

You can also load values dynamically in the `events()` method. You can use the following component properties to filter your events:

- `startsAt`: starting date of the month
- `endsAt`: ending date of the month
- `gridStartsAt`: 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 previous month).

```
public function events(): Collection
{
    return Model::query()
        ->whereDate('scheduled_at', '>=', $this->gridStartsAt)
        ->whereDate('scheduled_at', '
```

All custom views paths must be relative to the `resources/views` directory.

### Interactivity

[](#interactivity)

Several methods are available to interact with the calendar:

```
public function onDayClick($year, $month, $day)
{
	// This event is triggered when a day is clicked
}

public function onEventClick($eventId)
{
	// This event is triggered when an event card is clicked
}

public function onEventDropped($eventId, $year, $month, $day)
{
	// This event is triggered when an event is dragged & dropped onto another calendar day
}
```

You can override any of them to implement your custom logic.

By default, click and drag & drop events are enabled. To disable them you can use the following attributes when rendering the component

```

```

### Automatic polling

[](#automatic-polling)

You can add automatic polling if need be by defining a `$pollMillis` property in the Livewire component.

You can also combine it with `$pollAction` in order to call a specific action in your component at the desired polling interval.

To learn more about polling, please check out .

Flatpickr
---------

[](#flatpickr)

To handle navigation between months, this package makes use of the [Flatpickr](https://flatpickr.js.org) library. It displays a calendar picker which is way more powerful than simple ``.

### Importing

[](#importing)

First, add the Flatpickr library to your `package.json`'s dependencies:

```
{
	"dependencies": {
		"flatpickr": "^4.6.13"
	}
}
```

Then import this package's `flatpickr.scss` and `flatpickr.tsx` files to you main stylesheet & script.

`app.scss`:

```
@use '../vendor/brickx/calendax/resources/sass/flatpickr';
```

`app.js`:

```
import calendax from '../../../vendor/brickx/calendax/resources/scripts/flatpickr';

calendax();
```

### Customization

[](#customization)

You can customize the colors of the calendar picker to match your theme. To do so, simply override the Sass variables when importing `flatpickr.scss`:

```
@use '../vendor/brickx/calendax/resources/sass/flatpickr' with (
	$color-primary: saddlebrown,			// Basic color
	$color-accent: #FDBA74,				// Standard CSS color
	$color-contrast: rgb(118, 89, 71, 0.8),		// RGB color
	$color-range: theme('colors.orange.100')	// Tailwind theme color
);
```

Testing
-------

[](#testing)

You can test the component using `Pest` by running the following commands, depending on your needs.

*Standard test:*

```
composer test
```

*With coverage:*

```
composer test:coverage
```

*Parallel test:*

```
composer test:parallel
```

*Parallel test with coverage:*

```
composer test:parallel-coverage
```

Todo
----

[](#todo)

- Ideally, users should not have to mess with their sass & script files in order to import the proper dependencies. Everything should be done inside Blade (at the very least importing styles & script directly in Blade layout). See: .
- Find a way to highlight events in Flatpickr component (so that users see immediately which days have events).
- Handle Shields properly in README.md. Check out: .
- Create tests for Flatpickr component
- Update README.md for how to properly setup Flatpickr component
- Add default navigation, ideally using a dynamic calendar picker (instead of basic ``).

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](https://github.com/Keysaw/.github/blob/main/CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](https://github.com/Keysaw/calendax/security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Florian PLAMONT](https://github.com/Keysaw)
- [Andrés Santibáñez](https://github.com/asantibanez)
- [All Contributors](https://github.com/Keysaw/calendax/graphs/contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75.4% 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 ~3 days

Total

2

Last Release

1372d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/64f70e0332022e49d340fe940d6ee83fd70bb597343580c40308bae6e5d5e028?d=identicon)[Keysaw](/maintainers/Keysaw)

---

Top Contributors

[![Keysaw](https://avatars.githubusercontent.com/u/22835200?v=4)](https://github.com/Keysaw "Keysaw (43 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (7 commits)")

---

Tags

laravelbrickxcalendax

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/brickx-calendax/health.svg)

```
[![Health](https://phpackages.com/badges/brickx-calendax/health.svg)](https://phpackages.com/packages/brickx-calendax)
```

###  Alternatives

[spatie/laravel-livewire-wizard

Build wizards using Livewire

4061.0M4](/packages/spatie-laravel-livewire-wizard)[livewire/flux

The official UI component library for Livewire.

9385.0M86](/packages/livewire-flux)[leandrocfe/filament-apex-charts

Apex Charts integration for Filament PHP.

4861.2M8](/packages/leandrocfe-filament-apex-charts)[tonysm/importmap-laravel

Use ESM with importmap to manage modern JavaScript in Laravel without transpiling or bundling.

148399.8k1](/packages/tonysm-importmap-laravel)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[ralphjsmit/livewire-urls

Get the previous and current url in Livewire.

82270.3k4](/packages/ralphjsmit-livewire-urls)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)