Applying styles to calendar cells (for example to highlight current day and fade-out days in the past)

[vesper8]

I would love to be able to quickly identify the current day by applying a border around the current calendar day. And I would like to add a general faded opacity level on past days, they would still be clickable but they would be less prominent since they are in the past.

Any way to do this currently? If not would be a nice addition to the upcoming release : )

Thanks!

[wdelfuego]

There is no official support for this currently, but I agree that it'd be a nice feature to have! I'll look into incorporating this into a 2.x release.

You can probably reach what you want by injecting some custom CSS into your Nova app; the current calendar day already gets the class today so you can easily target it in your CSS using .nova-calendar .today to style the div that represents the day cell for today.

You could also make the current day stand out by adding a badge to the current calendar day using the customizeCalendarDay method in your CalendarDataProvider; just add a badge if $day->start->isToday().

[wdelfuego]

By the way, instead of fading out days in the past, you could fade out the events that are in the past using current event styling features.

For example, add this style to the array returned by your eventStyles method:

'faded' => [
    'opacity' => 0.6,
    'filter' => 'saturate(0.4)'
],

Then add this logic to your customizeEvents method:

if($event->model()->starts_at->isBefore(now()->setTime(0,0,0))) {
    $event->addStyle('faded');
}

(This example assumes your underlying Eloquent model to have a starts_at datetime property, adapt to your app).

[vesper8]

Thanks! That's a very useful workaround for now : )