# Event posts grouped by Month

### In this example

We'll take a list of company employees, and display them in alphabetical order with the Last name in Ascending order, and include a line with first letter of the last name.

### Step by step guide

1. First create your Field Group with the fields, in this case it's Event Date (date) assigned to a Custom Post Type (CPT) called Events.
2. Visit the **Advanced Views** tab in WordPress backend.

#### **Create your&#x20;*****Layout***

1. Click the **Add New** **Layout** button to add a new *Layout then* Enter a **Name** for your *Layout*.&#x20;
2. Click the **Add Field** button in the Assign *Fields* section. Then **select** the target *Group* from the list and the *Field* from the dropdown. Continue to **Add Fields** that should be included. in our case we're only adding two fields, Title with Link and Date.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FWX5pyS2PiBN5Jr2MajvA%2Fevent%20fields.jpg?alt=media&#x26;token=75072bfc-9f92-4bdb-a661-e79c0b42ee26" alt=""><figcaption></figcaption></figure>

3. Click on the **Publish** button to save and publish your *Layout*.&#x20;

#### **Create your&#x20;*****Post Selection***

1. Use the "Add new" button under 'Assigned to Post Selections' in the right sidebar of your Layout, or Simply go to the *Post Selections* top tab.
2. Click the **Add New Post Selection** button to add a new *Post Selection*, then enter a Name for your item.
3. On the General tab choose Item Layout 'event', select Post Type Event, for Sort by "Meta value", with the Sort by Meta Field Group the one containing the date field, in our case it's 'Date(ACF)'. Then for Sort by Meta Field select 'Date (date\_picker)' with Sort order "Ascending" i.e. alphabetical (This is important otherwise the grouping won't work correctly).

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FdY59DhDQ8c7bgei3vZiT%2Fsort%20by%20for%20event.jpg?alt=media&#x26;token=18a9468b-61ac-42a0-a3c2-e382288c7131" alt=""><figcaption></figcaption></figure>

4. Switch to Advanced tab and scroll down to Custom Data (Pro) and insert the function snippet below. Replace your field name for "date".

```php
<?php

use Org\Wplake\Advanced_Views\Pro\Bridge\Cards\Custom_Card_Data;

return new class extends Custom_Card_Data {
    public function get_variables(): array
    {
        $post_ids = $this->get_default_variables()["_card"]['post_ids'] ?? [];
        $grouped_items = [];

        foreach ($post_ids as $post_id) {

            // declare the field to group by
            $raw_date = get_field('date', $post_id); // ACF date field

            // convert to month string
            $month = "";
            if ($raw_date) {
                $timestamp = strtotime($raw_date);
                $month = $timestamp ? date('F Y', $timestamp) : 'No Date';
            } else {
                $month = 'No Date';
            }

            // initialize group if not exists
            if (!key_exists($month, $grouped_items)) {
                $grouped_items[$month] = [];
            }

            // add post to group
            $grouped_items[$month][] = $post_id;
        }

        return [
            "grouped_items" => $grouped_items,
        ];
    }
};
```

5. Switch to the Template tab, and copy your Default template content into the Custom template field below it.

Modifying from line 4 -> 18.

<pre class="language-twig" data-overflow="wrap" data-line-numbers><code class="lang-twig"><strong>// Card template example
</strong>&#x3C;acf-card-69a3ee57020ca class="{{ _card.classes }}acf-card acf-card--id--{{ _card.id }}">

	{% if _card.post_ids %}
		&#x3C;div class="acf-card__items">   
			{% for date, post_ids in grouped_items %}
            {{ date }}
            &#x3C;hr>
                {% for post_id in post_ids %}
                    [avf-layout id="{{ _card.view_id }}" object-id="{{ post_id }}"]
                {% endfor %}
      {% endfor %}		
		&#x3C;/div>
	{% else %}
		&#x3C;div class="acf-card__no-posts-message">{{ _card.no_posts_found_message }}&#x3C;/div>
	{% endif %}

&#x3C;/acf-card-69a3ee57020ca>
</code></pre>

6. Publish or Save your *Post Selection* and copy the shortcode into place.

Remember to create your event posts and fill out some information in the fields.

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FQDwBQjWccwCUgSE8fRVV%2Fresult.jpg?alt=media&#x26;token=948be009-6f97-44b0-8c8c-9cf240b0b3c2" alt=""><figcaption></figcaption></figure>
