Solspace Calendar Dates Not Showing Correctly

Question

Running EE 2.7.3 and Solspace Calendar 1.8.5

The mini-calendar here (bottom right) displays all dates that have events using this code:

<div id="mc_wrap">
   {exp:calendar:cal
      {if segment_2 == "calendars"}
         date_range_start="year-month-01" date_range_end="year-month-last"
      {/if}
      {if segment_2 == "edit"}
         date_range_start="year-month-01" date_range_end="year-month-last"
      {/if}
      {if segment_2 == "create"}
         date_range_start="year-month-01" date_range_end="year-month-last"
      {/if}
      {if segment_2 == "event"}
         date_range_start="year-month-01" date_range_end="year-month-last"
      {/if}
      {if segment_2 == ""}
         date_range_start="year-month-01" date_range_end="year-month-last"
      {/if}
      {if segment_2 == "month"}
         {if segment_3 == ''}date_range_start="year-month-01" date_range_end="year-month-last"{/if}
         {if segment_3 != ''}date_range_start="{segment_3}-{segment_4}-01" date_range_end="{segment_3}-{segment_4}-last"{/if}
      {/if}
      {if segment_2 == "week"}
         {if segment_3 == ''}date_range_start="year-month-01" date_range_end="year-month-last"{/if}
         {if segment_3 != ''}date_range_start="{segment_3}-{segment_4}-01" date_range_end="{segment_3}-{segment_4}-last"{/if}
      {/if}
      {if segment_2 == "day"}
         {if segment_3 == ''}date_range_start="year-month-01" date_range_end="year-month-last"{/if}
         {if segment_3 != ''}date_range_start="{segment_3}-{segment_4}-01" date_range_end="{segment_3}-{segment_4}-last"{/if}
      {/if}
   dynamic="off"
   }
      <div id="mc_calendar">
         {display_each_month}
         <table id="mini-cal">
            <thead>
                    <tr  id="mc_head">
                  <th colspan="1">{if segment_2 != "calendars"}<a id="mc_prev_month" class="icon left" href="{path=''}mini-cal/month/{prev_month format="%Y/%m"}/">&laquo;</a>{/if}</th>

                  <th colspan="5"><a href="{path='calendar'}/{month format="%Y/%m"}/">{month format="%F %Y"}</a></th>

                  <th colspan="1">{if segment_2 != "calendars"}<a id="mc_next_month" class="icon right" href="{path=''}mini-cal/month/{next_month format="%Y/%m"}/"> &raquo;</a>{/if}</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 class="
                 {if !day_in_current_month == FALSE}mc_pad{/if}
                 {if day_event_total > 0}has_events{/if}
                 {if count == 7}selected{/if}
                 {if day_is_today}today{/if}
              "><div class="mc_date">{if day_in_current_month}
                 {if day_event_total}<a href="{path='calendar/day'}/{day 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>
     {/display_each_month}
  </div>
{/exp:calendar:cal}
</div>

Clicking on the day takes you to this page. This works but with problems: the page displays a list of the days events and in most cases lists the day and date at the top using this code:

 <div id="main-content">
    {exp:calendar:cal
                date_range_start="{segment_3}-{segment_4}-{segment_5}"
                show_days="1"
                limit="1"
            }

    <h2>Events for {event_start_date format="%D, %M %d, %Y"}</h2>
    {/exp:calendar:cal}

    {exp:calendar:events
                date_range_start="{segment_3}-{segment_4}-{segment_5}"
                date_rande_end="{segment_3}-{segment_4}-{segment_5}"
                orderby="event_start_date"
                sort="asc"
                show_days="1"
            }

            <div class="inner"> 
                {if calendar_no_results}
                    No Results
                {/if}
            <div class="event-summary">
                <div class="details">
                    <span class="event-title"><a href="{path='calendar/event'}/{event_url_title}/{segment_3}/{segment_4}/{segment_5}">{event_title}</a></span>
                        {event_summary}
                        <p><b>Location</b>: {event_location}</p>
                        <p class="learn-more" ><a href="{path='calendar/event'}/{event_url_title}/{segment_3}/{segment_4}/{segment_5}">Learn more&raquo;</a></p> 
                </div>
                <div class="clearer"></div>
            </div>
        </div><!-- end .inner -->
        {/exp:calendar:events}
    </div><!-- end #main-content -->

For some reason the day/date information is not displaying correctly, even though it is reading from the URL.

For example if I click on May 24, the linked page displays Friday May 23, 2014. If I click on Monday, May 26, the linked page displays Thurs May 29, 2014. Clearly we have a problem.

And then, if I click on June 18, the linked page does not display any Day/Date at all.

I am open to all possible solutions.

Thanks.

Answer 1

Useful/Important Read: http://www.solspace.com/docs/calendar/getting_started/

Next, you have

date_range_start="{segment_3}-{segment_4}-{segment_5}"

..whereas your URL is

/~mac/calendar/day/2014/05/29/

Shouldn't that be the following?:

date_range_start="{segment_4}-{segment_5}-{segment_6}"

Further, in both cases, you need to use {exp:calendar:cal}, which is the only tag that deals with event data on a chronological timeline. {exp:calendar:events orderby="event_start_date"} won't be accurate, {exp:calendar:cal} is what would be used instead.

Finally, looks like you want to zoom in on a particular date, in that case you need to use:

{exp:calendar:cal
    date_range_start="{segment_4}-{segment_5}-{segment_6}"
    date_range_end="{segment_4}-{segment_5}-{segment_6}"
    pad_short_weeks="n"}

This will zoom in on a specific day, and limit the timeframe to that single day.

You need to have pad_short_weeks="" parameter set to n in the event you're trying to display anything other than a typical calendar display. When set to n, weeks won't be "padded" to the nearest first day of the week and last day of the week, as Calendar does this by default for the sake of properly outputting and formatting a calendar.

So for example, using the date_range_start="" and date_range_end="" parameters, if your code looks like this:

date_range_start="2011-10-19" date_range_end="2011-10-21" 

...with pad_short_weeks="" parameter NOT specified, Calendar will automatically display the entire week range (2011-10-16 - 2011-10-22). With pad_short_weeks="n", Calendar will just display the selected range (2011-10-19 - 2011-10-21).

_{(source: solspace.com)}

Finally, you have a separate {exp:calendar:cal} tag to display "Events for {event_start_date format="%D, %M %d, %Y"}" text. Although there are more than one way to display this data (since you have the date in the URL, you could combine that with {exp:calendar:date}, for example), the code as you have it will obviously loop through events, so will display the text more than once. Adding a {if count == 1} ... {/if} conditional should fix that and display the text once.