How To Mark a Business as "Closed" with The Events Calendar

In this article, we’ll show you how to mark your business as “Closed” in Month View with your events from The Events Calendar. We’ve provided you with two methods to do this: CSS and PHP.

How to add a CSS snippet

There are a few methods that you can use to add CSS to your WordPress site. You can:

Add custom styles directly to your stylesheets
Use the WordPress Customizer
Overwrite CSS files

For more information on how to add CSS to your site, this Knowledgebase article can walk you through the process so that you can determine the right method for you.

The CSS snippet

Add the following CSS snippet to your stylesheet in order to display the word “Closed” on your Month View calendar.

.tribe-events-calendar-month__week .tribe-events-calendar-month__day:nth-child(6) .tribe-events-calendar-month__events:after,
.tribe-events-calendar-month__week .tribe-events-calendar-month__day:nth-child(7) .tribe-events-calendar-month__events:after {
	content:"CLOSED";
	font-size:14px;
	margin:10px;
	background-color:red;
	padding:5px;
	border-radius:10px;
}

It’ll look something like this on the frontend:

mark your business as closed with The Events Calendar

To show a “Closed” text inside a specific Month View date, you can modify the following CSS snippet:

.tribe-events-calendar-month__day[aria-labelledby="tribe-events-calendar-day-2022-12-25"] .tribe-events-calendar-month__events:after {
    background: red;
    color: white;
    content: "CLOSED"!important;
    font-size: 14px;
    padding: 10px;
    margin-left: 20%;
}

Customizing the CSS snippet

You can customize the above snippet by changing the word “Closed” to something else, changing the font-size element, background color, or the padding and border.

If you’d like to change which days are marked as “Closed”, you’ll want to edit the number next to nth-child or add another nth-child to include additional “Closed” dates.

How to add a PHP snippet

If you choose the PHP method, you’ll want to create a template override of this file: /the-events-calendar/v2/month/calendar-body/day/cell.php

For more information on how to create a template override, check out this Knowledgebase article.

The PHP snippet

Once you’ve created a template override, you can add the following snippet to line 54:

<!-- Mark as "Closed" -->
<?php if ( in_array( Tribe__Date_Utils::build_date_object( $day['date'] )->format( 'w' ), [ 0, 6 ] ) && empty($day['events'])  && empty($day['multiday_events'])) {?>
	<div class="tribe-events-calendar-month__calendar-event">
		<div class="tribe-common-h8 tribe-common-h--alt"><?php esc_html_e( 'Closed', 'the-events-calendar' ); ?></div>
	</div>
<?php } ?>

Here is what you’ll see on your calendar:

Customizing the PHP snippet

To customize this snippet, we’d recommend using CSS to create a custom class on the second div in the PHP snippet.

How To Mark a Business as “Closed” with The Events Calendar