CSS classes for the month view grid

Description

The month view is an essential part of The Events Calendar and one of the most commonly used views. Here is a list of CSS class selectors that you can use to format the different days in the grid.

Snippet

// CSS class for past events (whether this month or past)
.events-gridview .tribe-events-past {}

// CSS class for this month's events (whether past, present or future)
.events-gridview .tribe-events-thismonth {}

// CSS class for today / the actual day
.events-gridview .tribe-events-present {}

// CSS class for future events (whether this month or future)
.events-gridview .tribe-events-future {}

// CSS class for not the current month (whether past or future)
.events-gridview .tribe-events-othermonth {}

// And you can combine...
// CSS class for past events previous month
.events-gridview .tribe-events-othermonth.tribe-events-past {}

// CSS class for past events current month
.events-gridview .tribe-events-thismonth.tribe-events-past {}

// CSS class for future events current month 
.events-gridview .tribe-events-thismonth.tribe-events-future {}

// CSS class for future events next month
.events-gridview .tribe-events-othermonth.tribe-events-future {}

If you would like to make more complex customizations to the month view and other calendar views, then our Themer's Guide is a good starting point.

Notes

  • Originally written in September 2019
  • Tested with Event Tickets 4.9.8
  • Author: AndrĂ¡s Guseo

Disclaimer

As with all of our recipes, please note that we share this in the hope it will be useful but without any guarantees or commitments. If you wish to use it, it is your responsibility to test it first of all and adapt it to your needs (or find someone who can do so on your behalf). We are unable to provide further support in relation to this recipe.