Working with Legacy View Body Classes

🔔 Note: this article only applies to legacy calendar views. If you are using the 5.x updated calendar views, please refer to the new article.

The Events Calendar makes styling calendar pages easier by adding classes to the <body> of the page that you can use to target specific calendar views.

For example, you can create custom styles just for the calendar’s list view using the .events-list body class in your stylesheet. This will update the styles for the list view while leaving all other views untouched.

The following are the body classes you can use to target specific views in your CSS.


List view

.events-list

Month view

.events-gridview

Week view

.tribe-events-week

Day view

.tribe-events-day

Map view

.tribe-events-map

Photo view

.events-photo

Table of Contents

Details

Report an issue