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


Month view


Week view


Day view


Map view


Photo view


Table of Contents


Report an issue