How to display current date in loop while inside {exp:calendar:cal} tag

Question

I feel like this should be a very simple solution (and probably is!), but I have been looking around for a while and still have not found any resolution. Maybe someone here can help me out!

I am displaying events for the next 6 months for a night club and some days have more than one event. The end result should follow this format:

September 5, 2014
   8pm Event 1 Title, Price + Summary
   10pm Event 2 Title, Price + Summary
September 6, 2014
   8pm Event 1 Title, Price + Summary
September 7, 2014
   8pm Event 1 Title, Price + Summary
   10pm Event 2 Title, Price + Summary
(etc.)

My issue is that I can't seem to figure out a way to display the 'date' value that dynamically changes based on the current event in the loop. The only thing that I can think that would be accurate is the "event_dates_and_options" tag, but I can't figure out how to get any information out of that other than a single digit (presumably number of items in the array?).

My code is as follows:

<div id="content-wrapper">
    <div id="content">
        <div class="eventcontainer">
            {exp:calendar:cal
                date_range_start="tomorrow"
                show_months="6"
                pad_short_weeks="n"
                }   

                <div class="clear">   
                    <div class="clear"> 
{!-- THIS IS WHERE I WANT THE DATE TO DISPLAY --}               
                    </div>

                    <div class="floatleft">
                        {event_image}
                            <img class="eventimage" src=website-images/event-images/_thumbnails/{filename}.{extension} />
                        {/event_image}
                    </div>

                    <div class="floatleft">
                        {title}<br />
                        {event_dates_and_options} • 
                            {if price}${price}{if:else}Free{/if}<br />
                        {event_summary}
                    </div>

                    <div class="floatright">
                        SHARE ICONS
                    </div>
                </div>
            {/exp:calendar:cal} 
        </div>
    </div> 
</div>

Thank you for taking a look! Best, Victor

Answer 1

The event_dates_and_options is not a custom fieldtype that can be used as-is.

In your case, you would loop through each day using {display_each_day}...{/display_each_day}. Then, at each day loop, use {events}...{/events} to display the events of that day. Eg.

{exp:calendar:cal
    date_range_start="tomorrow"
    date_range_end="+6 months"
    pad_short_weeks="n"
}

    {display_each_day}
        <h3>Events on {day format="%F %j, %Y"}</h3>

        {events}
           {event_start_date format="%g%a"}, {event_title}, {event_summary}<br /> 
        {/events}
    {/display_each_day}

{/exp:calendar:cal}