[Resolved] Toolset View – Group Views results by day

[Author]

Posts

[Paul Marconi]

Hi,

I am trying to group the results by day.
I followed the example here https://toolset.com/2013/10/how-to-group-views-results-by-year-and-month/ and it works.
It shows the <h5>Date Header</5> above the post items.

This is my site example:
hidden link

I want to wrap the post item divs within a parent div.

Currently the HTML is like the screenshot (current-html.png):

HTML code:
<div id="wpv-view-layout-1089">
<div class="label" style="background-color:#003A3A;color:#ffffff;">
<h5>June 27 2024</h5>
</div>

<div class="post-item">
<h3>Event 1</h3>
<p>2024-06-27 08:00:00</p>
</div>

<div class="post-item">
<h3>Event 9</h3>
<p>2024-06-27 17:00:00</p>
</div>

<div class="label" style="background-color:#003A3A;color:#ffffff;">
<h5>July 16 2024</h5>
</div>

<div class="post-item">
<h3>Event 3</h3>
<p>2024-07-16 08:00:00</p>
</div>

<div class="label" style="background-color:#003A3A;color:#ffffff;">
<h5>August 01 2024</h5>
</div>

<div class="post-item">
<h3>Event 11</h3>
<p>2024-08-01 08:00:00</p>
</div>

<div class="post-item">
<h3>Event 2</h3>
<p>2024-08-01 10:00:00</p>
</div>

<div class="post-item">
<h3>Event 4</h3>
<p>2024-08-01 14:00:00</p>
</div>

</div>

I want it to be like this screenshot (wrap.png):
HTML:
<div class="parent" id="date-08-01-2024">
<div class="post-item">
<h3>Event 11</h3>
<p>2024-08-01 08:00:00</p>
</div>
<div class="post-item">
<h3>Event 2</h3>
<p>2024-08-01 10:00:00</p>
</div>
<div class="post-item">
<h3>Event 4</h3>
<p>2024-08-01 14:00:00</p>
</div>
</div>

all the .post-item divs wrap inside the .parent div. As well it will be great to give a unique id name to the parent div such as my example above. Ex: id="date-08-01-2024"

How can I achieve that?

Thank you!

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where you added the view as well as admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please tell me where exactly you added the code you shared. I checked the child theme's functions.php file but I do not see the code you shared.

[Paul Marconi]

I actually added those PHP codes to my custom plugin 'SPRUCE Custom Plugin'

[Minesh]

Can you please check now: hidden link

I've adjusted the shortcode as given under:

function event_view_startDate_heading($atts, $content = '') {
  static $date = null;
  $condition = $atts['condition'];
  $value = $atts['value'];
  global $post;
  switch ($condition) {
    case 'date':
		   
      if ($$condition != $value) {
		  $formatted_date = do_shortcode("[event-start-date id='".$post->ID."' format='m-d-Y']");
		if($$condition==''){
			
			$return = '<div class="parent" id="date-'.$formatted_date.'">';
		}else{
			$return = '</div><div class="parent" id="date-'.$formatted_date.'">';
		}
        $$condition = $value;
        return $return.'<div class="label" style="background-color:#003A3A;color:#ffffff;">'.$content.'</div>';
      }
      break;
  }
  return '';
}

Also to your view's loop content template:
=> hidden link

I've added the following conditional shortcode:

[wpv-conditional if="( '[wpv-loop-index]' eq '[wpv-found-count]' )"]
</div>
[/wpv-conditional]

Can you please confirm it works as expected now.

[Paul Marconi]

Thank you @Minesh for your help, but I think I didn't make myself clear.
I wanted a parent div to wrap around the event posts, excluding the Event Date heading.
Like the screenshot attached (it was posted on my first post). So something like this:

<div class="label" style="background-color:#003A3A;color:#ffffff;"><h5>July 16 2024</h5></div><!--Event date heading-->

<div class="parent"> <!--NEW PARENT DIV -->
<div class="post-item"> <!--Child Event Div-->
<h3>Event 3</h3>
<p>2024-07-16 08:00:00</p>
</div>
</div> <!--NEW PARENT END DIV -->

<div class="label" style="background-color:#003A3A;color:#ffffff;"><h5>August 01 2024</h5></div><!--Event date heading-->

<div class="parent"> <!--NEW PARENT DIV -->

<div class="post-item"><!--Child Event Div-->
<h3>Event 11</h3>
<p>2024-08-01 08:00:00</p>
</div>

<div class="post-item"><!--Child Event Div-->
<h3>Event 2</h3>
<p>2024-08-01 10:00:00</p>
</div>

<div class="post-item"><!--Child Event Div-->
<h3>Event 4</h3>
<p>2024-08-01 14:00:00</p>
</div>

</div> <!--PARENT END DIV -->

What you have was quite close, but is there a way to wrap the child event posts (excluding the event date heading) within a parent div?

Thank you!

[Minesh]

Can you please check now: hidden link

I've adjusted the code as given under:

function event_view_startDate_heading($atts, $content = '') {
  static $date = null;
  $condition = $atts['condition'];
  $value = $atts['value'];
  global $post;
  switch ($condition) {
    case 'date':
		 
      if ($$condition != $value) {
		  $formatted_date = do_shortcode("[event-start-date id='".$post->ID."' format='m-d-Y']");
		if($$condition==''){
			$heading = '<div class="label" style="background-color:#003A3A;color:#ffffff;">'.$content.'</div>';
			$return = '<div class="parent" id="date-'.$formatted_date.'">';
		}else{
			$heading = '</div><div class="label" style="background-color:#003A3A;color:#ffffff;">'.$content.'</div>';
			$return = '<div class="parent" id="date-'.$formatted_date.'">';
		}
        $$condition = $value;
        return $heading.$return;
      }
      break;
  }
  return '';
}

Ca you please confirm it works as expected.

[Paul Marconi]

Thank you so @minesh ! You are the best! This is how I want it.
My issue is resolved now!