How do you change the styling for the appointment calendar?

Is it possible to add css styling to these elements? I'd like to change the font color and weight in the calendar.

  • Rupok

    Hi Mathew Burbank

    Hope you had a wonderful day.

    Yes, it is possible to add css styling to these elements.

    I'd like to change the font color and weight in the calendar

    To change font color and weight, use the following custom CSS Code:

    .appointments-list table th {
      color: #FF0000;
      font-weight: bold;
    }
    .appointments-weekly-calendar-hours-mins {
      color: #FF0000 !important;
      font-weight: bold !important;
    }
    .appointments-list table td.busy::after, .appointments-list table td.notpossible::after {
      color: #ff0000;
    }

    Please replace "#FF0000" with your desired color code.

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Have a nice day. Cheers!
    Rupok

  • Mathew Burbank

    Hi Rupok,

    Thanks very much for your explanation. I added the code you provided, but it only changed the styling of the day headings, i.e. mo, tu, etc. The actual numbers in the calendar, as well as the appointment times remain unchanged. I was able to get at those by adding the following css:

    .app_timetable_cell{
    font-size: 14px;
    }

    tbody {
    font-size: 18px;
    }

    Unfortunately, this still doesn't give me complete control over these numbers and feels like a hack. Can you help me style the actual calendar dates and appointment time numbers?

    Thank you.

  • Rupok

    Hi Mathew Burbank

    The actual numbers in the calendar, as well as the appointment times remain unchanged.

    I see, I was checking on daily schedule calendar. Now I've also covered monthly schedule calendar.

    To change actual numbers, use the following custom CSS:

    .app_monthly_schedule_wrapper table td p {
      color: #ff0000;
      font-weight: bold;
    }

    To change time text properties, use the following custom CSS:

    .appointments-list table td.free, .app_timetable div.free {
      color: #ff0000;
    }
    td.notpossible, div.notpossible {
      color: #ff0000;
    }
    td.busy, div.busy {
      color: #ff0000;
    }

    Please let us know if it doesn't cover all and mention on which you need help. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.