<p>Thank you, Jeremy, for helping out! I really appreciate it. I solved the issue today using the "Super Table"-plugin (matrix within a matrix).</p>

<pre><code>{% extends "layout.html" %}

{% block calendar %}

{% for row in entry.eventCalendar.all() %}

&lt;div class="row no-gutters"&gt;

{% for block in row.months.all() %}

  &lt;div class="col-12"&gt;
   &lt;div class="calendar-bar d-flex justify-content-between justify-content-md-center"&gt;
      &lt;p class="d-flex align-self-center agenda-item left w-25"&gt;{{ block.month }}&lt;/p&gt;
      &lt;p class="d-flex align-self-center agenda-item right"&gt;{{ block.year }}&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;

{% endfor %}

&lt;/div&gt; &lt;!-- End row --&gt;

&lt;div class="row no-gutters"&gt;

{% for block in row.eventInfo.all() %}

     &lt;div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1"&gt;
      &lt;div class="box-calendar black text-white"&gt;
        &lt;div class="row no-gutters p-3"&gt;

          &lt;div class="col-2 pl-lg-1 pt-1"&gt;
            &lt;h5&gt;{{ block.eventDate }}&lt;/h5&gt;
          &lt;/div&gt;

          &lt;div class="col-10 pt-1 pr-2"&gt;
            &lt;h5&gt;{{ block.eventTitle }}&lt;/h5&gt;
            &lt;ul class="pt-1 mt-1 calendar-brood"&gt;
              &lt;li class="uppercase"&gt;{{ block.eventType }}&lt;/li&gt;
            &lt;/ul&gt;

            &lt;ul class="pt-3 mt-1 calendar-brood"&gt;
              &lt;li&gt;{{ block.eventTime }}&lt;/li&gt;
              &lt;li&gt;{{ block.eventLocation }}&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class="pt-3 mt-1 pb-3 calendar-brood"&gt;{{ block.eventDescription }}&lt;/div&gt;
          &lt;/div&gt;

      &lt;/div&gt; 
    &lt;/div&gt; 
  &lt;/div&gt;
{% endfor %}

&lt;/div&gt; &lt;!-- End row --&gt;

{% endfor %}

&lt;/div&gt; &lt;!-- End Calendar --&gt;

{% endblock %}
</code></pre>

CC BY-SA 4.0
2019-10-30T20:59:31.433Z
This question seems to be related more to your frontend framework not Craft.
Jeremy Gimbel
CC BY-SA 4.0
2019-10-30T07:53:50.190Z
2019-10-31T18:50:34.720Z
2019-10-31T18:50:34.720Z
Mars
<p>I'm not entirely clear what your Matrix blocks/fields are setup like, so it's a little hard to tell what's going on here.</p>

<p>But I'm going to take a stab at it.</p>

<p>Your outer loop is looping through all the blocks in the <code>calendarGroup</code> Matrix field.</p>

<p>Then you're using a switch to determine which piece of code to execute based on which one of the two block types each block is.</p>

<p>All that looks ok.</p>

<p>But here is <em>I think</em> where your problem lies:</p>

<pre><code>{% for entries in entry.calendarGroup.type('events') %}


{% endfor %}
</code></pre>

<p>This loop is starting fresh and looping over all the Matrix blocks in the <code>calendarGroup</code> Matrix field, except this time it's <em>only</em> getting the blocks of the <em>event</em> block type.</p>

<p>Then, inside that loop you are using the <code>{{ block.fieldName }}</code> variables again. But <code>block</code> is set in your parent loop. And nowhere are you referencing <code>entries</code> from your inner loop.</p>

<p>So there is a mismatch in your logic. I think you can simply do away with the inner loop, it's it's going to out put all of the <code>event</code> blocks inside each <code>event</code> block in the outer loop.  That, to me, seems like the issue.</p>

CC BY-SA 4.0
2019-10-30T01:59:48.370Z
2019-10-30T01:59:48.370Z
Jeremy Gimbel
<p>First let me say this: I'm new to Craft and Twig. So: my apologies for probably overlooking the obvious. I hope you can offer me some help... I've been trying for a couple of days to solve this puzzle. Nothing seems to work. ;-S</p>

<p>I'm trying to create a simple events calendar using Craft 3, Twig and Bootstrap 4. The calendar exist of two parts: 1. a section with 3 columns (col-4) that lists the events; and 2. a divider (col-12) that contains the month and year. I used the Matrix field in Craft to be able to be flexible in sorting events within a certain period of time. </p>

<p>The Issue:
I expected to see the three columns to neatly sit beside each other horizontally (on the desktop version of the site). But this doesn't seem to work right now: because I use a for loop to enable switch, the for loop I need for outputting the event-items results in the same row of events being repeated a couple of times instead of just once. </p>

<p>What am I doing wrong? </p>

<p>I very much appreciate any thoughts. </p>

<p>Greetings from The Netherlands, sorry for my bad English,</p>

<p>Mars</p>

<pre><code>{% block calendar %}

    {% for block in entry.calendarGroup.all() %}

        {% switch block.type %}

            {% case "events" %}

                &lt;div class="row no-gutters"&gt;

                    {% for entries in entry.calendarGroup.type('events') %}

                        &lt;div class="col-md-4 pt-1 pb-1 pb-md-0 pr-md-1"&gt;
                            &lt;div class="box-calendar black text-white"&gt;
                                &lt;div class="row no-gutters p-3"&gt;
                                    &lt;div class="col-2 pl-lg-1 pt-1"&gt;
                                        &lt;h5&gt;{{ block.eventDate }}&lt;/h5&gt;
                                    &lt;/div&gt;

                                    &lt;div class="col-10 pt-1 pr-2"&gt;
                                        &lt;h5&gt;{{ block.eventTitle }}&lt;/h5&gt;
                                        &lt;ul class="pt-1 mt-1 calendar-brood"&gt;
                                            &lt;li class="uppercase"&gt;{{ block.eventType }}&lt;/li&gt;
                                        &lt;/ul&gt;

                                        &lt;ul class="pt-3 mt-1 calendar-brood"&gt;
                                            &lt;li&gt;{{ block.eventTime }}&lt;/li&gt;
                                            &lt;li&gt;{{ block.eventLocation }}&lt;/li&gt;
                                        &lt;/ul&gt;
                                        &lt;div class="pt-3 mt-1 pb-3 calendar-brood"&gt;{{ block.eventDescription }}&lt;/div&gt;
                                    &lt;/div&gt;

                                &lt;/div&gt; 
                            &lt;/div&gt; 
                        &lt;/div&gt;

                    {% endfor %}

                &lt;/div&gt;

            {% case "months" %}

                &lt;div class="row no-gutters"&gt;

                    &lt;div class="col-12"&gt;
                        &lt;div class="calendar-bar d-flex justify-content-between justify-content-md-center"&gt;
                            &lt;p class="d-flex align-self-center agenda-item left w-25"&gt;{{ block.month }}&lt;/p&gt;
                            &lt;p class="d-flex align-self-center agenda-item right"&gt;{{ block.year }}&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt; &lt;!-- End row --&gt;

            {% endswitch %}
        {% endfor %}

    &lt;/div&gt;

{% endblock %}
</code></pre>

<templating><craft3><matrix><bootstrap-craft>
Matrix loop (nesting?) issue using switch
# Matrix loop (nesting?) issue using switch

(Asked by: username_0 on 2019-10-29)

First let me say this: I'm new to Craft and Twig. So: my apologies for probably overlooking the obvious. I hope you can offer me some help... I've been trying for a couple of days to solve this puzzle. Nothing seems to work. ;-S
I'm trying to create a simple events calendar using Craft 3, Twig and Bootstrap 4. The calendar exist of two parts: 1. a section with 3 columns (col-4) that lists the events; and 2. a divider (col-12) that contains the month and year. I used the Matrix field in Craft to be able to be flexible in sorting events within a certain period of time. 
The Issue:
I expected to see the three columns to neatly sit beside each other horizontally (on the desktop version of the site). But this doesn't seem to work right now: because I use a for loop to enable switch, the for loop I need for outputting the event-items results in the same row of events being repeated a couple of times instead of just once. 
What am I doing wrong? 
I very much appreciate any thoughts. 
Greetings from The Netherlands, sorry for my bad English,
Mars
{% block calendar %}

    {% for block in entry.calendarGroup.all() %}

        {% switch block.type %}

            {% case "events" %}

                

                    {% for entries in entry.calendarGroup.type('events') %}

                        
                            
                                
                                    
                                        {{ block.eventDate }}
                                    

                                    
                                        {{ block.eventTitle }}
                                        
                                            {{ block.eventType }}
                                        

                                        
                                            {{ block.eventTime }}
                                            {{ block.eventLocation }}
                                        
                                        {{ block.eventDescription }}
                                    

                                 
                             
                        

                    {% endfor %}

                

            {% case "months" %}

                

                    
                        
                            {{ block.month }}
                            {{ block.year }}
                        
                    

                 

            {% endswitch %}
        {% endfor %}

    

{% endblock %}

**Tags:** templating, craft3, matrix, bootstrap-craft

---

## 2 answers

### Answer by username_0 on 2019-10-30. Score: 1 | Accepted answer

Thank you, Jeremy, for helping out! I really appreciate it. I solved the issue today using the "Super Table"-plugin (matrix within a matrix).
{% extends "layout.html" %}

{% block calendar %}

{% for row in entry.eventCalendar.all() %}



{% for block in row.months.all() %}

  
   
      {{ block.month }}
      {{ block.year }}
   
  

{% endfor %}

 



{% for block in row.eventInfo.all() %}

     
      
        

          
            {{ block.eventDate }}
          

          
            {{ block.eventTitle }}
            
              {{ block.eventType }}
            

            
              {{ block.eventTime }}
              {{ block.eventLocation }}
            
            {{ block.eventDescription }}
          

       
     
  
{% endfor %}

 

{% endfor %}

 

{% endblock %}

> **Comments:**
> **username_1**: This question seems to be related more to your frontend framework not Craft.  

---

### Answer by username_1 on 2019-10-30. Score: 2

I'm not entirely clear what your Matrix blocks/fields are setup like, so it's a little hard to tell what's going on here.
But I'm going to take a stab at it.
Your outer loop is looping through all the blocks in the calendarGroup Matrix field.
Then you're using a switch to determine which piece of code to execute based on which one of the two block types each block is.
All that looks ok.
But here is I think where your problem lies:
{% for entries in entry.calendarGroup.type('events') %}


{% endfor %}

This loop is starting fresh and looping over all the Matrix blocks in the calendarGroup Matrix field, except this time it's only getting the blocks of the event block type.
Then, inside that loop you are using the {{ block.fieldName }} variables again. But block is set in your parent loop. And nowhere are you referencing entries from your inner loop.
So there is a mismatch in your logic. I think you can simply do away with the inner loop, it's it's going to out put all of the event blocks inside each event block in the outer loop.  That, to me, seems like the issue.


---

