Display entries for each month

Question

I created html template using radio buttons as tabs as you can see in the picture. When user click on any of the tabs the relevant entries for that month display and the rest hidden.

I created matrix field to group the calendar field and other text fields but my question is how to dynamic display all entries for each month? So that I can use CSS to hide other entries and show entries when tab are selected.

Answer 1

You could do this multiple ways.

One you could create a category with each month and an input for your entries and assign that month to each category. Then it would be a matter of calling that categories relatedTo param using each Month Category ID.

{% set monthIds = craft.categories.group('months').ids() %}

{% for monthId in monthIds %}
    <div>
        {# group each months entries #}
        {% for item in craft.entries.section('sectionName').relatedTo({targetElement:monthId}) %}
            {# content for each entry. #}
        {% endfor %}
    </div>
{% endfor %}

Two you could use your eventStart field.

{# 1 == January #}
{% set months  = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] %}
{% for month in 1..12 %}
    <div>
        {# group each months entries #}
        {% set idx = month - 1%}
        <h3>{{ months[idx] }}</h3>
        {% for item in craft.entries.section('blog') if item.eventStart|date("n") == month %}
            {# content for each entry. #}
            <h3>{{item.title}}</h3>
        {% endfor %}
    </div>
{% endfor %}