New in v6: Setup Calendar view on your Laravel projects

Last month, we introduced a new feature in Backpack. It is CalendarOperation, a simple way for your admins to see their database entrie...

Last month, we introduced a new feature in Backpack. It is CalendarOperation, a simple way for your admins to see their database entries on a calendar. Behind the hood, it's powered by the feature-rich FullCalendar.

Let's explore what it does... how we can use it.

What it does

That's obvious - it adds a calendar view!

Why? You must have used Google Calendar to schedule meetings. It is convenient and intuitive to see time-based entities like meetings... on a calendar. Right?

Well.. the CalendarOperation allows you to do just that... to any entities in the DB you might have... for example Appointment, Booking, Meeting, Event... or anything else, really. And it's plug-and-play, you can set it up in just 10 minutes!

Quickly impress your admins by showing entries in a calendar, not just a list:

---

How to use it

0. Purchase the CalendarOperation add-on. Of course, if you've purchased our EVERYTHING bundle... you already have access to it.

1. Install the package using Composer:

composer require backpack/calendar-operation

2. In your database migration, create the table columns you'll need for displaying events on the calendar: title, start and optionally: end, background_color and text_color. If you have different names for those columns, no problem, you'll be able to map them in the next step. But if you're just creating the migrations now, you can use the recommended column names:

Schema::create('meetings', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->dateTime('start');
    $table->dateTime('end')->nullable(); // optional
    $table->string('background_color')->nullable(); // optional
    $table->string('text_color')->nullable(); // optional
    // ...
    $table->timestamps();
});

3. Next up, use the CalendarOperation trait on your CrudControllers:

class MeetingCrudController extends CrudController
{    
    use \Backpack\CalendarOperation\CalendarOperation;    
}

If you have different columns in the table, you can map them by defining getCalendarFieldsMap() in those CrudControllers:

protected function getCalendarFieldsMap(): array
{
    // you only need to map the fields that you use and are different:
    return [
        'title' => 'event_name',
        'start' => 'start_date',
    ];
}

Done! We have a fully functional calendar showing the entries by weekly, daily & monthly views.

Some Quick Configurations

Out-of-the-box, the package offers a range of customization options to tailor the calendar to specific project needs. You can:

• Choose initial views(Day/Week/Month);
• Toggle views availability;
• Add/Remove menu items;
• Tweek Calendar javaScript options;
• Configure Calendar colors based on dynamic criteria;
• Handle JavaScript widget integration;

public function setupCalendarOperation()
{
    CRUD::setOperationSetting('initial-view', 'dayGridMonth');
    CRUD::setOperationSetting('views', ['dayGridMonth', 'timeGridWeek', 'timeGridDay']);    

    CRUD::setOperationSetting('background_color', '#3788d8');
    CRUD::setOperationSetting('text_color', '#ffffff');

    CRUD::setOperationSetting('background_color', fn($event) => $event->active ? 'green' : 'red');
    CRUD::setOperationSetting('text_color', fn($event) => $event->active ? 'white' : 'black');

    CRUD::setOperationSetting('with-javascript-widget', true);
    CRUD::setOperationSetting('javascript-configuration', [
        'dayMaxEvents' => false,
        // ... Additional FullCalendar options
    ]);

    CRUD::setOperationSetting('editable', true);    
    $this->addCalendarLineButton(
        action: 'email',
        label: 'Send Email',
        group: 'send',
        url: fn($event) => backpack_url('send-email', ['email' => $event->email])
    );
}

The configuration possibilities are extensive. You can find more configuration possibilities here.

Bringing It All Together

If you find yourself in need of a Calendar solution for your Laravel application. Calendar Operation is at your service with no development efforts. In my first use, I marvelled at effortlessly transforming mundane CRUD operations into an engaging and interactive experience.

Did you know? We got the most upvotes for CalendarOperation on our Community Forum. We are prompt about new feature requests. If you need a feature, suggest it here or upvote it, if it already exists. Thanks for contributing to our community!