Full Calendar Color Customization

This topic contains 4 replies, has 2 voices, and was last updated by  Josh Mason-Barkin 9 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #21091

    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?

    Josh Mason-Barkin
    #21092

    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;
    };
    
    Stephen Harris
    #21540

    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.)

    Josh Mason-Barkin
    #21551

    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.

    Stephen Harris
    #21581

    It works after adding the default color thing.
    Thanks.

    Josh Mason-Barkin
Viewing 5 posts - 1 through 5 (of 5 total)
To enable me to focus on Pro customers, only users who have a valid license for the Pro add-on may post new topics or replies in this forum. If you have a valid license, please log-in or register an account using the e-mail address you purchased the license with. If you don't you can purchase one here. Or there's always the WordPress repository forum.