[Resolved] Show Events that overlap with current date

[Author]

Posts

[michaelA-13]

Tell us what you are trying to do?

Hi, I set a a new CPT (Locations) and a child CPT (Events with two date fields "start" and "end").

A Location may have several Events.

I would like a view with a single date selector (should default to todays date). Where is returns all Locations where any of the Events dates overlap with todays date.

So if I have:

Location 1
Event 1 12. Feb 2018 - 20. Feb 2018
Event 2 24. Feb 2018 - 15. Mar 2018

Location 2
Event 1 10. Feb 2018 - 19. Feb 2018

Location 3
Event 1 13. Feb 2018 - 28. Feb 2018
Event 2 29. Feb 2018 - 5. Mar 2018

Location 4
Event 1 23. Feb 2018 - 28. Feb 2018

So today 17. Feb 2018 it would return

Location 1
Location 2
Location 3

On the 23rd Feb it would return:

Location 3
Location 4

Michael

[Christian Cox]

Hi, there's not an easy way to filter a View of post type A by custom fields in post type B, even if a parent/child relationship exists. I can offer some assistance with a View showing Events whose start and end dates intersect with a User-selected date. Then I can explain your options for getting Location information from those matching Events.
- First, create a View of Events. In the Filter editor panel, insert a filter on your start date custom field. If you cannot see the filter editor panel, scroll to the top of the View editor screen in wp-admin and click "Screen Options" in the top right corner. Check the box to display the Filter Editor panel. Configure the filter to show all Events with start dates greater than or equal to TODAY(), comparing values as numbers. The resulting shortcode will look something like this:

[wpv-control-postmeta field="wpcf-start" default_date="TODAY()" url_param="wpv-wpcf-start"]

- In the Loop Output area, display the title, start, and end date of each matching Event for testing purposes.
- Next, add some custom code to your child theme's functions.php file:

add_filter( 'wpv_filter_query', 'default_today_inclusive', 10, 3 );
function default_today_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 12345 ) {
    // defaults
    $selected_start = strtotime('0:00:00');
    $selected_end = strtotime('23:59:59');

    // if user selected a start date, update the default selected values accordingly, and unset existing start meta query
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-start'){
          // get timestamps that represents 12:00 am and 11:59:59 pm on the event start date
          $selected_start = strtotime(date('m/d/Y', $meta['value']) . ' 0:00:00');
          $selected_end = strtotime(date('m/d/Y', $meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }
    // find events with start date less than or equal to selected date
    // and end date greater than or equal to selected date
    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-start',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-end',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

- Replace 12345 with the numeric ID of this View. If your field slugs are not "start" and "end", then the keys "wpcf-start" and "wpcf-end" should be updated as well. Add the "wpcf-" prefixes here.
- Place this View on a custom Page to test it out. Once you have the proper Events appearing, then we can discuss next steps for showing parent Locations.

Let me know how it goes.

[michaelA-13]

Hi Carl,

works like a charm already 🙂 - I am able to display the parent (Location) Title so all is good.

I would have another question related to this:

How can I have it such that while the spinner is shown the (previous) results are hidden?

Michael

[michaelA-13]

--Removed--

[michaelA-13]

Another issue I just discovered:

If I try to wrap the loop item in a link <a> the link is moved before the <div>. (See Screenshot)

I also tried with <span> instead of div.

Michael

[Christian Cox]

How can I have it such that while the spinner is shown the (previous) results are hidden?
You could use jQuery to hide all the previous results while you wait. Open the View's Filter Editor JS panel, and click the Front End Events button. A dialog will pop up. In the Custom Search tab, check "The custom search has been triggered" and insert the event listener. You will see a template like this:

jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.form (object) The jQuery object for the View form
	* data.update_form (bool) Whether the custom search form will be updated
	* data.update_results (bool) Whether the custom search results will be updated
	*/
});

Inside that callback, you use jQuery to hide the View's loop of results. You can access the View's unique hash ID in the data parameter like data.view_unique_id as shown in the template above. So the code to hide the results might look like this if you have a basic loop:

jQuery('#wpv-view-layout-' + data.view_unique_id + ' .js-wpv-loop').hide();

If you have a different setup let me know where I can see it and I will offer another solution.

If I try to wrap the loop item in a link <a> the link is moved before the <div>. (See Screenshot)
Check the page source rather than the DOM inspector. I think you have wpv-post-link inside another link tag pointing to wpv-post-url. That results in an "a" tag as a parent of another "a" tag. You can't nest link tags, it's invalid HTML, and the browser tries to fix it for you in the DOM by reorganizing the content in a valid way. Fix that and let me know if the structure is still not correct.

[michaelA-13]

Hi Christian,

the Link issue has been resolved 🙂 thx.

Concerning the Loader it work to some extent.

The ID of my layout is "wpv-view-layout-809-TCPID862" if I copy that into the query you provided it works. But "dynamically" it does not. I tried to illustrate in a screenshot.

Best Michael

[michaelA-13]

I keep discovering new things.

Is it possible to not show/add the url parameters when the filter is changed? I would like a clean address bar.

Michael

[Shane]

Hi Michael,

As Christian is currently on vacation i will see how best I can assist you with this.

On you view go to the and then the Custom Search Settings. From there take a look at the screenshot you can see I've set the "Let me choose individual settings manually" and under browser management you can set if you want the parameters to be there or not.

Please let me know if this helps.
Thanks,
Shane

[michaelA-13]

Hi Shane,

thanks you I will give it a try.

I still have an issue (Answer 617294) with the solution provided in answer 617225.

Michael

[Christian Cox]

I still have an issue (Answer 617294) with the solution provided in answer 617225.
You can use the "^=" operator in jQuery to select IDs that "start with" a specific string:

jQuery('div[id^="wpv-view-layout-' + data.view_unique_id + '"]').hide();

hidden link

[michaelA-13]

Thx all well now.