Solspace Multi-mini-cal

Question

Using Solspace Calendar, Is there any way to correctly display multiple calendars on one page? I am using the cal tag and the direct copy of solspace code gives me a single calendar on the page. When I use the following tag below I get very bizarre errors.

The current month is shown, and the following 6 months, with month names in place. The day numbers from next month onward are not listed, but are all dots, even though the right number of days are shown. The next month's days don't start on the correct day either.

Its like the tags are counting the correct months and number of days, just not rendering them in the correct grid and without the numbers in anything but this month.

Surely you can show more than one month on a page? Is this a bug? If not, does this mean I have to make 6 calls to this very expensive tag to get the 6 cals to show on a page? Is there an alternative?

<ul class="slider--programme">
   {exp:calendar:cal calendar_id="3" date_range_start="today" show_months="6"}
       {display_each_month}
       <li>
       <table>
          <thead>
             <tr>
                <th colspan="7"><h2>{date format="%F %Y"}</h2></th>
             </tr>
             <tr id="mc_days">
                {display_each_day_of_week}
                <th class="{if day_of_week_is_weekend}weekend{/if} {if day_of_week_is_current}current{/if}">{day_of_week_one}</th>
                {/display_each_day_of_week}
             </tr>
          </thead>
          <tbody>
             {display_each_week}
             <tr>
                {display_each_day}
                <td cellpadding="0" cellspacing="0" class="{if day_event_total > 0}has_events{/if}">
                    <div class="mc_date">
                   {if day_in_current_month}
                     {if day_event_total}<a href="/programme/day/{date format='%Y/%m/%d'}/">{/if}
                       {day}
                     {if day_event_total}</a>{/if}
                   {if:else}
                        <strong class="middot">&middot;</strong>
                   {/if}
                   </div>
                  </td>
                {/display_each_day}
             </tr>
             {/display_each_week}
          </tbody>
       </table>
       </li>
       {/display_each_month}
   {/exp:calendar:cal}
  </ul>

Answer 1

The issue is with the calendar padding, which only pads the first month. Padding is the addition of extra days in a calendar row to make a complete, 7-day row, regardless whether the day is in the month or not. For example, the row at Aug 31 gets padded with September days from Sep 1st to Sep 6th to complete the calendar table.

After the first month is padded, each subsequent month doesn't get "re-padded" with days from the padded first month. That's when the calendar table layout breaks since there are missing days. Unfortunately this is an issue with Calendar, based on the way it makes its calculations for days.

The solution is to indeed repeat the {exp:calendar:cal} tag as many times as months you want to display.