Ordering/sorting channel entries by Calendar date

Question

I have a channel (event) that is being used to display 'events', which is being ordered on the page by a date field (e_date).

I have now added Solspace Calendar (e_calendar) as a new field to replace the existing date (e_date) and time (e_time) fields.

Below is my channel:entries code, with the updates to display the (e_calendar) date and time.

What I want to know is how how do I get the events to order/sort - so the next upcoming event appears first, etc.

{exp:channel:entries channel="event" limit="4" sort="asc" orderby="e_date" dynamic="no"}
<div class="hevent">
    <div class="{switch='hedate1|hedate2'}">{e_calendar}
        <div class="day">{calendar:event_start_date format="%l"}</div>
        <div class="date">{calendar:event_start_date format="%j"}</div>
        <div class="month">{calendar:event_start_date format="%M %Y"}</div>{/e_calendar}
    </div>
    <div class="hecont">
        <h4>{title}</h4>
        <p>{e_summary}</p>
    </div>
    <div class="hecont">
        <p><i>{e_calendar}{calendar:event_start_date_timestamp_utc format="%g:%i%a"} to {calendar:event_end_date_timestamp_utc format="%g:%i%a"}{/e_calendar}</i>
        <br>{e_location}</p>
    </div>
</div>
{/exp:channel:entries}

I have tried a few things but cannot seem to work it out.

ANY HELP is appreciated!

Answer 1

The documentation for Solspace Calendar suggests that you should be using the add-on's Calendar Events tag to do this.

HTH