Mini-calendar: Is it possible to change the background color if has event?

[Thomas Shepherd]

Hi,
I have my calendar here: http://new.abingdonconcertband.org.uk/
Is it possible to configure it so that if a day has a future/past event it highlights the background colour in a different colour?

Many thanks,

Thomas

[Barry]

Anything is possible! Have you looked at these resources?

• Technical Documentation (the date template tags will be useful for what you want to do here)
• Tutorials (in particular, you need to familiarize yourself with Template Overrides
• You will also need some basic knowledge of HTML and CSS – there are some great learning resources out there that I’m sure you will be able to find by searching

[Thomas Shepherd]

Hi Barry,
Thanks for this. I’m guessing that I just need it to append something like class=”has-event” to the relevant tags. Once I can get it to do that, then yes I can style it with CSS to display how I want it to in my sleep.

What I can’t work out though is how to get the plugin to write that little bit code?

Many thanks,

Thomas

[Barry]

So are you referring to the calendar widget?

If so, note that each table cell already has an appropriate CSS class such as .tribe-events-past, .tribe-events-present and .tribe-events-future – so perhaps you can work with those?

[Thomas Shepherd]

Yes, the mini-calendar widget. I’ve already thought of that, but the has-event class gets added to the tag, not the surrounding tag. Thus, the background colour gets applied only to the text, not the cell.

Many thanks,

Thomas

[Barry]

OK … I’m not completely clear on what you’re saying/trying to do.

The table cell (td) element is a child of the table row element (tr), and I don’t imagine you want to apply the background colour to either the entire row or the entire table.

[Barry]

Re-reading your post, I think it got scrambled a little (perhaps you tried to embed an HTML link).

In the case of the mini-calendar widget, the only visible content inside a cell (other than a tooltip, which only shows when the mouse hovers over it) is the link, so you could expand and then pad that element so it fills the cell with the day number still centered.

[Barry]

Hi Thomas! Unless you need any further help here I’ll go ahead and close this thread.

[Author]

Posts