Change Calendar Background Color

  • I’m having trouble viewing the Event Calendar properly on a dark themed WordPress website. The main color of the text in the website is white. Unfortunately the Event Calendar has a white background, and since the text for the days of the week is also white, they’re not visible.

    I’ve tried using [Enable theme compatability mode (default)] and [Enable template handling], but neither setting works.

    Is there some custom CSS that I could use to style the Event Calendar background and also the (table/div) borders. This would allow users to see the days of the week, and the Calendar would fit much better with the dark theme. I mention the table/div borders since the current neutral grey borders would be hard to see in the dark theme background.

    • This topic was modified 5 years, 10 months ago by silver2019.
    • This topic was modified 5 years, 10 months ago by silver2019.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • You can overwrite any part of the calendar with CSS.
    Use code inspector to pinpoint the classes used.

    You can use the following to change the row’s background color:

    .fc-row .fc-bg {
background: #000;
}

    or to change the color of the day only:

    .fc-day-number {
color: #000;
}
    Thread Starter silver2019

    (@silver2019)

    Hi Harrison,

    Thanks for your answer! Everything is much better, with one exception – there is no exterior table border on the right side of the table. It looks like the right side of the table might be truncated by one or two pixels. Is it possible the table width is wrong?

    I’ve tried changing the CSS border property for .fc-sat and even .fc-content-skeleton but nothing seems to bring back the border on the right side of the table.

    Any ideas how to fix the missing right border?

    Your theme’s css is affecting the EO table. The culprit is basically this:

    #content tr td:last-child, #content tr th:last-child {
border-right: none;
}

    I think you should be safe removing the below styles. Some are adding margins and extra borders to the plugin’s table.

    #content table { border: 0; margin: 0 0px 24px 0; text-align: left; width: 100%; vertical-align: top; }
#content tr { vertical-align: top; }
#content .alternate { }
#content tr th, #content thead th { padding: 9px 24px; font-weight: 600; }
#content tr td { border-top: 1px solid transparent; padding: 6px 24px; }
#content tr td:last-child, #content tr th:last-child { border-right: none; }
#content tr.odd td { }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Calendar Background Color’ is closed to new replies.