Inject events from low_events:entries into low_events:calendar cells

ExpressionEngine template

{exp:low_events:calendar
    events_field="cf_events_date_time"
    date="{freebie_4}"
}
<table class="calendar" cellspacing="0" cellpadding="0">
    <thead>
        <tr id="month_pager">
            <th colspan="1" class="previous"><a href="{structure:page:uri}
on/{prev_month_url}" title="{prev_month format='%F %Y'}">&larr;</a></th>
            <th colspan="5" class="month_title"><a href="{structure:page:uri}
on/{this_month_url}"><strong>{this_month format="%F %Y"}</strong></a></th>
            <th colspan="1" class="next"><a href="{structure:page:uri}
on/{next_month_url}" title="{next_month format='%F %Y'}">&rarr;</a></th>
        </tr>
        <tr class="weekdays">
            {weekdays}<th scope="col">{weekday}</th>{/weekdays}
        </tr>
    </thead>
    <tbody>
        {weeks}
        <tr{if is_given_week} class="given-week"{/if}>
            {days}
            <td class="{if is_current != 'y'}not_current{/if}{if is_given} given{/if}{if is_today} today{/if}" id="date-{day_url}">
            {if is_current}
                <div class="date">
                    {day_number}
                </div>
            {if:else}
                &nbsp;
            {/if}
            </td>
            {/days}
        </tr>
        {/weeks}
    </tbody>
</table>
{/exp:low_events:calendar}

<ul class="listing">
    {exp:low_events:entries
        channel="events"
        events_field="cf_events_date_time"
        {if freebie_4}date="{freebie_4}"{/if}
        {if freebie_4 ==""}date="{current_time format="%Y-%m"}"{/if}
    }
    <li class="item">
        <div class="item_content event" id="date-{cf_events_date_time:start_date format="%Y-%m-%d"}">
            <h3><a href="{page_uri}">{title}</a></h3>
            <p class="event_location_type">{categories show_group="4" backspace="2"}{category_name}, {/categories}
            {if cf_events_date_time:all_day != "y"}
                <p class="meta">{cf_events_date_time:start_time format="%H:%i"} - {cf_events_date_time:end_time format="%H:%i"}</p>
            {/if}
            {if cf_events_date_time:one_day != "y"}
                <p class="notice"><a href="{page_uri}">This is a multi-day event. Check the event for full dates</a>.</p>
            {/if}
        </div>
    </li>
    {/exp:low_events:entries}
</ul>

Javascript

$(".event").each(function() {
    // get the ID of the event element
    var the_date = $(this).attr("id");
    
    // find the tabel cell with that same ID and append the div
    $(this).clone().appendTo('.calendar td#' + the_date);
});

The idea is that you output the calendar AND a list of events in the template. Then you clone the events in the list and move them into the correct calendar table cells. To do this you need to make sure the cell's an the list items have the same ID. You can see I'm using the format id="date-2012-10-29" for this.

The list is hidden via CSS.

The other option is instead of outputing a list of events and cloning/moving them, you could create a JSON object of events and inject those into the calendar cells. This would make your template cleaner and you wouldn't have to hide any content. In my case though the site was responsive and so on larger screens I'm showing the calendar but as the screen gets smaller I hide the calendar and show the list. This works well.