How to add a class to days that have been partially booked?

I would like to color days on the calendar that have been partially booked differently than days that are completely open or completely booked. I figured the easiest way would be to add a CSS class to any day that had an appointment. Does anyone know how or have any ideas how to make that happen?

  • Patrick

    Hey there @Matt

    Welcome to the forums, glad to have you aboard!

    To get that do work automatically for any day that had an appointment booked, you would need to add a new class to the front end boxes in the get_classes function. Then include a new switch in the get_preset function.

    Both these functions can be found in appointments/appointments.php starting at around line 1198.

    However, I'm not sure how to write a function that can apply the proper filters to get this done. So I'll see if one of our 2nd-level support wiz-kids can jump in here to lend a hand. Hang on...

  • Jose

    Hello there @Matt,

    Sorry for the late response here. Hope you are doing great.

    As @Patrick Cohen pointed above, you can hack the plugin code and add the logic there for this. It is not too complicated, but the issue with this approach is that any upgrade to the plugin will erase your changes.

    I coded a solution for you using only javascript. You should include the following snippet in your theme. You can do it using wp_enqueue_script into functions.php file. I added a couple of extra features to the snippet that can be handy for your needs.

    ( function() {
        var cells = jQuery(".app_monthly_schedule_wrapper table");
        cells.each(function(index, value){
            var timetable = jQuery(".app_timetable_"+jQuery(this).find(".appointments_select_time").val());
            if(timetable.find(".app_timetable_cell.busy").length != 0){//for each day, we check if the related timetable contains booked cells
                jQuery(this).addClass('partially_booked');//Add the new class.
                //This is an extra bonus: You can do whatever you want with the matched cell.
                jQuery(this).attr('style', 'background-color:rgb(255, 214, 0)!important');//Change the color or any othe attribute.
                jQuery(this).html('<p>'+jQuery(this).text()+'Hurry!</p>');//Change the html into de cell.
    } )();

    Please let me know how it works for you!


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.