Customize This Week Widget

[Christine Cobb]

I’m using the “This Week” shortcode to create an event list by day on my page. Everything looks good except I really only want Thursday, Friday, Saturday and Sunday. I changed WordPress to start the week on Thursday and I set the start date in my shortcode. How can I eliminate showing Monday, Tuesday, Wednesday at the end?

[Cliff]

Hi, Christine.

You mentioned This Week Widget but then also the shortcode.

This is what the This Week Widget looks like for me–https://cl.ly/2T251G2L1A3H–which would only show days that have events.

If you’re asking about the This Week view for the main events page–https://cl.ly/0c2A0w302p1S (which is like the tribe_events shortcode’s output)–this CSS might be what you’re wanting:

.tribe-week-day-header-0,
.tribe-events-day-column-0,
.tribe-events-day-column-0 {
display: none !important;
}

Note the numbers 0 through 6 are the days of the week… so if you have Thursday set as the first day of the week for some reason, the CSS above would likely target Thursday… so maybe change your week start day back and then try to implement this CSS.

Please let me know how this goes for you.

[Christine Cobb]

Thanks Cliff for responding. I have a festival that starts on Thursday and ends on Sunday. There are multiple events each day and I wanted a simple list by day rather than a calendar view. I chose the “This Week” shortcode as it had most of what I was looking for. I changed the WordPress setting for the beginning of the week to Thursday because I was getting “No events” for Monday, Tuesday and Wednesday at the top of the list.

If I add the CSS you describe, will that work with the shortcode or is that just for the calendar?

Maybe there is another solution for creating a simple list for those 4 days other than the “This Week” shortcode?

[Cliff]

I’d suggest changing the first day of the week back to something normal (e.g. Sunday) and then adding the appropriate CSS for “day zero” (Sunday), “day 1” (Monday), etc. through Wednesday (zero through 3), repeating the CSS for each.

Therefore, it’d be this:

.tribe-week-day-header-0,
.tribe-events-day-column-0,
.tribe-events-day-column-0,
.tribe-week-day-header-1,
.tribe-events-day-column-1,
.tribe-events-day-column-1,
.tribe-week-day-header-2,
.tribe-events-day-column-2,
.tribe-events-day-column-2,
.tribe-week-day-header-3,
.tribe-events-day-column-3,
.tribe-events-day-column-3 {
display: none !important;
}

It should work for any Week view (widget, shortcode, or just yoursite-com/events/week)

Please let me know how this goes for you.

[Christine Cobb]

This is the code that worked for me:

.tribe-this-week-widget-day-1,
.tribe-this-week-widget-day-2,
.tribe-this-week-widget-day-3 {
    display: none !important;
}

The only other thing that would make it perfect is to spell out the days (i.e. Thursday instead of Thur)

[Cliff]

I’m glad you got a working solution!

I believe the day names are customizable via the tribe_events_week_day_header filter.

I’ll close this thread since we answered your initial question, and we like to keep our forum threads focused on a single question.

Thanks! 🙂

[Author]

Posts