Description
On some occasions, you might want to hide some days (the whole column) in Month view. Here is how you can do that.
The CSS snippet below will hide the last two days of the week. So if you have Monday set as the first day of the week under Setting > General on your WordPress dashboard, then it will hide Saturday and Sunday.
Usage
Copy the below code into your (child) theme’s style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usually put custom styling).
Plugins
The Events Calendar (version 6 and above)
Snippet
To hide the last day of the week:
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__header-column:nth-child(7),
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__day:nth-child(7) {
display: none;
}
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__header-column,
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__day {
width: calc(100% / 6);
}
.tribe-events-calendar-month__multiday-event--width-7 .tribe-events-calendar-month__multiday-event-bar{
max-width:600%;
}
To hide the last two days of the week:
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__header-column:nth-child(6),
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__day:nth-child(6),
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__header-column:nth-child(7),
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__day:nth-child(7) {
display: none;
}
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__header-column,
.tribe-events-view--month.tribe-common--breakpoint-medium .tribe-events-calendar-month__day {
width: var(--tec-grid-width-1-of-5);
}
.tribe-events-calendar-month__multiday-event--width-7 .tribe-events-calendar-month__multiday-event-bar, .tribe-events-calendar-month__multiday-event--width-6 .tribe-events-calendar-month__multiday-event-bar {
max-width: 500%;
}
Explanation
In the first part of the snippet, we are hiding the day(s) in month view.
In the second part, we make sure that the rest of the days use up the full remaining space.
Days
You can see the numbers 6 and 7 in the above snippets. Those refer to the days in the week, Saturday being the 6th day and Sunday being the 7th in the week (if Monday is set as the first day).
Based on this, you can easily adjust the snippet to hide any day you like in Month view.
Resolution
The above snippets will work on the tablet/medium resolution (body container is 768px or wider) and desktop/full resolution (960px or wider). This is ensured by the .tribe-common--breakpoint-medium class.
If you would like the snippets to work only on desktop/full resolution, then change that selector to .tribe-common--breakpoint-full.
On the other hand, if you would like to display all the days on desktop/full resolution, and show fewer days on tablet/medium resolution, then you can achieve that like this:
.tribe-events-view--month.tribe-common--breakpoint-medium:not(.tribe-common--breakpoint-full) .tribe-events-calendar-month__header-column:nth-child(7),
.tribe-events-view--month.tribe-common--breakpoint-medium:not(.tribe-common--breakpoint-full) .tribe-events-calendar-month__day:nth-child(7) {
display: none;
}
.tribe-events-view--month.tribe-common--breakpoint-medium:not(.tribe-common--breakpoint-full) .tribe-events-calendar-month__header-column,
.tribe-events-view--month.tribe-common--breakpoint-medium:not(.tribe-common--breakpoint-full) .tribe-events-calendar-month__day {
width: calc(100% / 6);
}
If you would like to remove days for all resolutions, then remove .tribe-common--breakpoint-medium altogether from the CSS rules.
Notes
- Originally written in April 2022
- Tested with The Events Calendar 5.14.1
- Author: András Guseo
Disclaimer
As with all of our recipes, please note that we share this hoping it will be useful but without any guarantees or commitments. If you wish to use it, it is your responsibility to first test it and adapt it to your needs (or find someone who can do so on your behalf). We are unable to provide further support concerning this recipe.