Solspace Calendar Cal tag multiple months

Question

Using Solspace Calendar, Cal tag to display a range of months. However I am experiencing some odd behaviour. See the link below. The Cal is getting the Start/End date from the URL. http://www.245207.temp-dns.com/calendar/2012/10/2013/05

It seems to mixing some of the days up and adding out_of_range css classes to days. I read somewhere that it is because of the way the Calendar module calculates the days in a month.

Here is my code:

        <div id="month-cal">


    {exp:calendar:cal date_range_start="{segment_2}-{segment_3}-01" date_range_end="{segment_4}-{segment_5}-last"}



      {display_each_month}
      <table id="fc_outer">
         <thead>
            <tr id="month_year">
               <th colspan="2">&laquo; <a href="{path='calendar/month'}/{prev_month format="%Y/%m"}/">{prev_month format="%F"}</a></th>
               <th colspan="3">{date format="%F %Y"}</th>
               <th colspan="2"><a href="{path='calendar/month'}/{next_month format="%Y/%m"}/">{next_month format="%F"}</a> &raquo;</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td colspan="7">
                  <div class="wrap">
                  <table id="fc_inner">
                     <thead>
                        <tr id="days_of_week">
                           {display_each_day_of_week}
                           <th class="day_of_week {day_of_week}">{day_of_week}</th>
                           {/display_each_day_of_week}
                        </tr>
                     </thead>
                     <tbody>
                        {display_each_week}
                           <tr>
                              {display_each_day}
                              {if day_in_current_month}
                                 <td class="day_cell"><div class="date">{date format="%j"}</div>
                              {if:else}
                                 <td class="day_cell out_of_range"><div class="date"><span class="num">{date format="%j"}</span></div>
                              {/if}
                              {display_each_hour}
                                 {events}
                                    <div 
                                      class="
                                         event {if event_all_day}all_day{/if} 
                                         {if event_multi_day}multi_day{/if} 
                                         {if event_first_day}first_day{/if} 
                                         {if event_last_day}last_day{/if} 
                                         {if all_day_event_index_difference > 0}index_difference_{all_day_event_index_difference}{/if}
                                      ">
                                   {if event_multi_day} 
                                      {if event_all_day == FALSE}
                                         {if event_first_day}
                                            {event_start_time}
                                         {/if} 
                                         {if event_last_day}
                                            {event_end_time}
                                         {/if}
                                      {/if}
                                         <a href="{path='calendar/event'}/{event_id}/">{event_title}</a>
                                   {if:else}
                                      {if event_all_day == ''}
                                         {event_start_date format="%g"}{if event_start_minute > 0}:{event_start_minute}{/if}{if event_end_time != event_start_time && event_end_time != '00:00'}&ndash;{event_end_date format="%g"}{if event_end_minute > 0}:{event_end_minute}{/if}{event_end_date format="%a"}{if:else}{event_start_date format="%a"}{/if}
                                      {/if}
                                         <a href="{path='calendar/event'}/{event_id}/">{event_title}</a>
                                   {/if}
                                    </div>
                                 {/events}
                              {/display_each_hour}
                           </td>
                           {/display_each_day}
                        </tr>
                        {/display_each_week}
                     </tbody>
                  </table>
               </div>
            </td>
         </tbody>
      </table>

   {/display_each_month}
   {/exp:calendar:cal}      
  </div><!-- end month-cal -->

I was wondering if there was a way to get around this?

Thanks

Answer 1

the link you provided doesn't seem to be working anymore, getting just blank page.

Solspace calendar will pad weeks at the beginning and ending of the month, this is used to support a standard grid calendar layout. If you're using the cal tag for displaying a list you might want to pass in this parameter:

pad_short_weeks="n"

This will eliminate the padding and could prevent some weird display issues

Here's the documentation for reference http://www.solspace.com/docs/calendar/calendar/