Calendar - Shows event beginning date and not the current event date

Question

I am running Solspace Calendar 1.8.9 on EE 2.8.1 and I am having an issue with recurring events not reflecting the next event date, but instead showing the first event date.

Example: On this page, the first event is "Southern Fried Comics..." with a date of 7.7.2014. However, if you click on the title it takes you to the event details page where the Date is displayed as July 2.

Here is the code on the first page:

{exp:calendar:cal 
                    date_range_start="today" 
                    orderby="event_start_date" 
                    category="{segment_3}" 
                    show_months="3" 
                    dynamic="off" 
                    event_limit="10" 
                    paginate="bottom"
                    }
                            <div class="event-summary">
                                    <div class="details">
                                        <span class="event-title"><a href="{path='calendar/event'}/{event_url_title}">{event_title}</a></span>
                                        {exp:trunchtml chars="100" inline="..." }{event_summary}{/exp:trunchtml}
                                        <span class="local-time">{event_location} | {event_start_date format="%g:%i%a"} | {contact_phone}</span>
                                        <p class="learn-more" ><a href="{path='calendar/event'}/{event_url_title}">Learn More &raquo;</a></p>
                                    </div><!-- end .details -->

                                    <div class="date-details">
                                        <span class="month-day">{event_start_date format="%n.%j"}</span><br />
                                        <span class="year">{event_start_date format="%Y"}</span>
                                    </div>
                                    <div class="clearer"></div>
                            </div><!-- end .event-summary -->

                                    {paginate}
                                        <div class="pagination">
                                            Page <span class="this-page">{current_page}</span> of {total_pages} pages &nbsp; {pagination_links}
                                        </div>
                                    {/paginate}

{/exp:calendar:cal} 

And here is the code for the event page:

{exp:calendar:events 
                    limit="1" 
                    event_name="{segment_3}"
                    dynamic="no" }
                        <h3>{event_title}</h3>

                        <div id="event-details">

                            <h4>When:</h4>
                                <p>
                              {if event_recurs}
                                 {exp:calendar:date
                                    base_date="{segment_4}-{segment_5}-{segment_6}"
                                    output_date="today"
                                 }
                                    {date format="%l, %F %j"} @ {event_start_date format="%g:%i%a"}
                                 {/exp:calendar:date}
                              {if:else}
                                 {event_start_date format="%l, %F %j @ %g:%i%a"}
                              {/if}
                           </p>

                            <h4>Location:</h4>
                            <p>{event_location}
                                {if event_address}<br />
                                    {event_address}
                                {/if}
                            </p>

                            <h4>Admission:</h4>
                            <p>{admission}</p>

                            <h4>Contact</h4>
                            <p>{contact_phone}</p>

                    {/exp:calendar:events}  

                    <div id="more-events">
                                <h4>More Events</h4>

                        {exp:calendar:cal 
                            calendar_id="11" 
                            date_range_start="{segment_3}-{segment_4}-{segment_5}"
                            date_range_end="{segment_3}-{segment_4}-{segment_5}"
                            pad_short_weeks="n"
                            event_limit="3" 
                            dynamic="off"}
                            <div class="event-mini">
                                <span>{event_start_date format="%m.%d"}</span>
                                <p><a href="{path='calendar/event'}/{event_id}/">{event_title}</a></p>
                             <div class="clearer"></div>
                            </div>
                        {/exp:calendar:cal}

                        <p  class="more-events"><a href="{site_url}calendar/">{ More Events }</a></p>
                    </div><!-- #more-events -->

                        </div><!-- end #event-details -->

                        <div id="event-full-description">
                        {exp:calendar:events orderby="title" sort="asc" limit="1" event_name="{segment_3}" date_range_start="today" show_months="6" dynamic="off"}
                                {event_summary}
    {/exp:calendar:events}  

How can I change the code so it reflects the correct date?

Thanks!

Answer 1

Use {exp:calendar:cal} for your details page. This is the tag that will display only the occurrences of an event within the timeframe set in date_range_start="" and date_range_end="" (also add pad_short_weeks="n"!).

Building an events detail page with a specific date "zoomed in" has been answered in another thread, with the full solution posted here: Get (Solspace) calendar occurences sorted by date

(I believe ExpressionEngine® Answers doesn't like links to solutions and prefers full inline answers. If that's necessary, I can post the same answer from that thread here.)

Answer 2

You have to use the 'occurrences' tag within the loop to display the specific event occurrence that you want. http://www.solspace.com/docs/calendar/occurrences/ Use event_range_start and event_range_end to select the proper occurence. The date value you're using in the above code is only for the date used on the first entry.

{exp:calendar:occurrences
    date_range_start="{segment_3}-{segment_4}-{segment_5}"
    date_range_end="{segment_3}-{segment_4}-{segment_5}"
    dynamic="off"
}