Displaying more hours in the Week View grid

[Ben]

Hello. We have modified our calendar to include some new events in evening hours.

These events do not display in the Week View grid without scrolling, and the availability of scrolling is non-obvious. This means these events are invisible to most users.

We want to extend the range of hours displayed in the Week View grid. Based on this post:
https://theeventscalendar.com/week-view-refactor/

we’ve modifed our child theme with the PHP below in an effort to show the hours from 9am to 9pm without scrolling. It is not working.

<?php
add_filter( 'tribe_events_week_get_hours', 'filter_week_hours' );
function filter_week_hours( $hours ) {
  $hour = 0;
  
  foreach ( $hours as $key => $formatted_hour ) {
    if ( $hour < 9 || $hour > 21 ) {
      unset( $hours[ $hour ] );
    }
    
    $hour ++;
  }
  
  return $hours;
}

1. Can you advise what we need to do?

2. Can you suggest a wording for a feature request for this function: Control the range of hours displayed in the Week View grid, without the need for code.

Thanks!

• This topic was modified 8 years, 8 months ago by Ben.
• This topic was modified 8 years, 8 months ago by Brian.
• This topic was modified 8 years, 8 months ago by George.

[George]

Hey Ben,

Sorry you’re having trouble with this snippet – just to be 100% certain what that trouble is, can you clarify exactly what you mean when you write that “It is not working”? Are the hours being filtered correctly, but just still scrolling? Are your events disappearing or something? Just want to better understand the problem here.

Next, can you share a link to the main Events page on your site? If it’s blocked for anyone except members, is there any way you could temporarily un-block it? (We can’t log into customer sites, unfortunately 🙁 )

I’m just curious to see it first-hand because there might be a much simpler CSS and/or JavaScript solution here that would work better.

Finally, as for the wording of the feature request, the wording you used in your post itself is pretty good! 🙂 This is actually a feature we have on our radar, though if you’d like to vocalize more support for this feature you can definitely post on our UserVoice page → http://tribe.uservoice.com

Thanks!
George

[Ben]

Hi George — thanks for your reply!

Here’s our main Events page, it’s public — http://peterboroughdialogues.media/calendar/

Yes, the issue is that the events are filtered correctly but the calendar still requires scrolling to view a full day.

We’ve switched the default view to Month view because of this issue. If you go to Week view, you’ll see that it’s not clear the evening events exist until you hover and scroll the calendar, which hides these events in a way we can’t have happen.

Thanks!

[George]

Hey Ben,

Thanks for the link! Sorry I wasn’t able to find that on my own 🙂

As for your issue, I’m glad that you noted that the filtering of hours itself works correctly – that’s good to know and leaves us, then, with not so much a code problem but a styling one on your site, which is much easier to deal with!

To get the full grid to expand, in other words to get all the hours to display and thus make it so that users don’t have to scroll to see events, you should be able to do this by simply adding CSS like the following to the bottom of your theme’s style.css file:


.tribe-events-grid .tribe-scroller {
height: 100% !important;
}
.tribe-events-grid .tribe-scroller > .scroller-content {
position: relative !important;
}


Now, I tried this with my development tools on your site and it worked fine, but let me know if you have trouble getting these styles to “stick” – this might be tricky to pull off because some these scroll-pane styles are generated by JavaScript after page load, which makes CSS selector inheritance issues possible here. That’s one of the reasons I added “!important” to these styles, to try and force them to take effect.

These styles should expand the grid to its full height, which should also by itself hide the little vertical scroll bar and its track on the right side of the week view grid…

Let me know if this happens and if that CSS helps!

Thanks,
George

[Ben]

Excellent George. It works, and I really appreciate it.

I’m going to ask a different but related question in a new thread.

[George]

Awesome! Glad to have helped Ben. I’ll race the other support team members to get your next thread first 😉

Cheers!
George

[Author]

Posts