Full Calendar Color Customization

[Josh Mason-Barkin]

For the full calendar, events show with their category color as the background color. Instead, I’d like all events to have a transparent background-color and rather use the category color for the event’s text.

Is this possible, and if so, how?

[Stephen Harris]

Hi Josh,

Yes, to make the events transparent try adding the following to your theme

.eo-fullcalendar a.fc-event {
    background: transparent!important;
    border: none;
}

Then to set the colour you’ll need to use the filter: eventorganiser_fullcalendar_event (see docs).

This filters each an event (which is an array) before it sent to the calendar. But please note that the calendar is cached, so you’ll need to update an event before the changes take effect. All you need to do is set the textColor key (and the color key for good measure):

add_filter( 'eventorganiser_fullcalendar_event', 'my_callback_function', 10, 3 );
function my_callback_function( $event, $event_id, $occurrence_id ){
    $event['textColor'] = $event['color']; //Set text colour to background colour
    $event['color'] = false; //Set background colour to false.
    return $event;
};

[Josh Mason-Barkin]

Placed the filter code (verbatim) in my functions.php file.
It caused the calendar to be unable to get past “Loading…”
(I pulled it out of functions.php, and the calendar worked fine.)

[Stephen Harris]

Did you place it within <?php ... ?> tags? I’ve copied that snippet and it works fine (except that some events may not have a default colour, so $event['color'] may not be set. So you may want to do:

$event['textColor'] = isset( $event['color'] ) ? $event['color'] : '#ff0000';

and change '#ff0000' to your preferred default colour.

I’d recommend you check the ajax response to see if its a 500 error code. That would mean a server-side error and you can determine what that is by checking the error logs.

Otherwise it could be a client-side error, but the above snippet should not cause that.

[Josh Mason-Barkin]

It works after adding the default color thing.
Thanks.

[Author]

Posts