View on GitHub

nova-calendar

A powerful event calendar Tool for Laravel's Nova 4

⬅️ Back to Documentation overview

Table of Contents

Customizing Events

The customizeEvent method

You can customize event info (name, start time, end time, notes, badges) and customize the CSS styles applied to the event div by implementing the customizeEvent(Event $event) method in your calendar data provider. Every event gets passed through this method before it’s delivered to the frontend. The method must return the customized event.

By default, your events get the title that the Nova resource’s title() method returns and the start time is set to the value of the attribute specified in your data provider’s novaResources() method. Other event fields are left empty by default but can easily be loaded from the event’s associated model:

protected function customizeEvent(Event $event) : Event
{
    if($event->model())
    {
        $event->end($event->model()->datetime_end);
        $event->name($event->model()->name);
        $event->notes($event->model()->notes);
    }
    return $event;
}

Your customization can be a lot more complex, too:

use Wdelfuego\NovaCalendar\Event;

protected function customizeEvent(Event $event) : Event
{
    // Give each event a duration of 4 hours (for display only)
    $event->end($event->start()->copy()->addHour(4));

    // For events that have an underlying Eloquent model..
    if($event->model())
    {
        // Prefix each event's name with its ID
        $event->name($event->model()->id .' - ' .$event->name());

        // Add a warning emoji badge if the end user should 
        // be warned about the model's state
        if($event->model()->isInACertainState())
        {
            $event->addBadges('⚠️');
        }

        // Add a note to the event that is displayed right below
        // the event's name in the calendar view
        if($event->model()->someSpecialCase())
        {
            $event->notes('Something special is going on');
        }
    }

    // Display all events without time info
    $event->hideTime();

    return $event;
}

Adding badges to events

As you can see in the example above, the addBadge and addBadges methods let you add letters, short strings or emoji to events as badges that will be shown in the upper right corner of the event box.

You can use html in a badge, so you can use mark-up or include hero icons using svg tags:

    // Html mark-up
    $event->addBadge($count .'/<b>' .$total .'</b>');
    
    // Hero icon
    $event->addBadge('<svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>');

The use of ‘X’ as a badge isn’t recommended because it could be mistaken for a close button.

Event badges do not currently support tooltips; calendar day badges do.

Chainable customization methods

The following customization methods with regard to the display of the Event in the calendar view are available:

All of these methods return the Event itself so you can chain them in the customizeEvent method:

Non-chainable customization methods

Corresponding methods are available in non-chainable form, if you prefer to work with those.

These function as simple setters when you supply an argument, and as getters when you don’t.

Changing what happens when an event is clicked

Implement the following method in your calendar data provider to change the URL that the user is sent to when they click the event:

protected function urlForResource(NovaResource $resource)
{
    return '/resources/' .$resource::uriKey() .'/' .$resource->id;
}

This example shows the default behavior. If you append /edit to the string, users will be sent directly to the resource’s Edit view, instead of to its Detail view.

Customizing the CSS

You can customize the CSS that is applied to the event divs in the calendar view on a per-event basis, or on a global basis by customizing the default event style.

Customizing the default event style

In your calendar data provider, implement the eventStyles() method to return the CSS that you want to apply to all events by default:

For example, to make the default style white with black text:

public function eventStyles() : array
{
    return [
        'default' => [
            'color' => '#000',
            'background-color' => '#fff'
        ],
    ];
}

Defining a default style is not required; if you don’t define it, the default default style will use white text on a background in your app’s primary color as defined in config/nova.php under brand => colors => 500.

Adding custom event styles

To add custom event styles, add them to the same array:

public function eventStyles() : array
{
    return [
        'default' => [
            'color' => '#000',
            'background-color' => '#fff'
        ],
        'special' => [
            'color' => '#f00',
        ],
        'warning' => [
            'border' => '1px solid #f00'
        ]
    ];
}

After you defined your styles in the eventStyles array, call addStyle or addStyles in your customizeEvent method using the names of the styles (in this example, ‘special’ or ‘warning’) to apply them to individual events.

The original withStyle and style methods are deprecated; withStyle is now an alias for addStyle and style is only supported on events that have at most one custom style assigned to it.

For example:

use Wdelfuego\NovaCalendar\Event;
use App\Nova\SomeResourceClass;

protected function customizeEvent(Event $event) : Event
{
    // For events that have an underlying Eloquent model..
    if($event->model())
    {
        if($event->model()->isInACertainState())
        {
            $event->addStyle('warning');
        }
    }

    // Display all events that have a specific class of Nova
    // resource with a specific style:
    if($event->hasNovaResource(SomeResourceClass::class))
    {
        $event->addStyle('special');
    }

    // Or conversely, display all events that don't have a 
    // Nova resource with a specific style:
    if(!$event->hasNovaResource())
    {
        $event->addStyle('special');
    }

    return $event;
}

Adding multiple custom event styles to a single event

You are free to assign multiple styles to a single event using the addStyles method.

Their CSS specifications will be merged in the order that they were added to the event, with styles added later overruling the ones added before it. Other, non-conflicting CSS properties defined by styles added before it will still be applied to the event as expected.

For example:

protected function customizeEvent(Event $event) : Event
{
    if($event->model())
    {
        if($event->model()->isInACertainState())
        {
            // 'warning' takes precedence over 'special'
            $event->addStyles('special', 'warning');
        }
    }

    return $event;
}

⬅️ Back to Documentation overview