Hide Past Events on The Events Calendar's Month View

In The Events Calendar's Month View, events that occurred earlier in the month are grayed out to visually indicate they are past events.

To completely hide them instead of leaving them grayed out, you can use the following CSS code snippet.

Note: If your site visitors navigate to a Previous Month, that Month View will appear completely empty.

CSS Code

You can add custom CSS code via your child theme's style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

If you're not a CSS expert, Jetpack's Custom Design reference may prove helpful.



Before - CSS hiding past events in Month View


After - CSS hiding past events in Month View