Grouping events by year in Drupal 8 using the date range field type
We have an events content type that uses the date range field type. We display our events as a list on a page. We wanted to group the events by year. Here’s how we did it.
Datetime Range is a core module and can be enabled in Extend.
What you need
- A content type like events that uses a date range field
- A page View that displays a list of those events
Process summary
- Add the date field to the View
- Set it to show only the year of the start date
- Group results by year
Add date field to the View
And show only the year of the start date
This video shows how to do this in detail! It’s an amazing tutorial by Vagelis Prokopiou. He breaks down how to do it, but why it works. I’ll just show the steps.
Add the date field to Fields
If you are using Content: Teasers, first go to Format: Settings and check “Force using fields”.
If you are already displaying a date field in your view, make a new one.
Set it to show the year
Edit the date field and change the date format to HTML Year or any other date formatter you have set up that shows the year. -
Keep the date separator as ‘ - ”.
Check “exclude from display”.
Show only the start date
Still editing the field, open Rewrite Results and check “override output of this field with custom text.” Enter this in that text field where field_event_date is the machine name of your date field. See the video linked above for why this works.
{{ field_event_date|split(' - ')[0] }}Save.
Group results by year
Go to Format: Settings and use the date field as the grouping field. Check both “use rendered output to group rows” and “remove tags from rendered content”
That’s it!
Fast, no coding required. Have fun out there, you lovely site-builders.
