Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Using Ajax to navigate through a Low Events calendar for ExpressionEngine
{!-- events/cal template --}
{if segment_2 == 'cal'}
{preload_replace:pre_date="{segment_3}"}
{/if}
{if segment_2 != 'cal'}
{preload_replace:pre_date="{segment_2}"}
{/if}
{exp:low_events:calendar date="{pre_date}"}
<table id="calendar">
<caption>
<a href="{path='events/{prev_month_url}'}" title="{prev_month format='%F %Y'}">&larr;</a>
<strong>{this_month format="%F %Y"}</strong>
<a href="{path='events/{next_month_url}'}" title="{next_month format='%F %Y'}">&rarr;</a>
</caption>
<colgroup>
{weekdays}
<col />
{/weekdays}
</colgroup>
<thead>
<tr>
{weekdays}
<th>{weekday_1}</th>
{/weekdays}
</tr>
</tr>
</thead>
<tbody>
{weeks}
<tr{if is_given_week} class="hilite"{/if}>
{days}
<td class="{if is_given} given{/if}{if is_today} today{/if}">
{if is_current}
{if events_on_day}<a href="{path="events/{day_url}"}">{day_number}</a>{if:else}{day_number}{/if}
{/if}
</td>
{/days}
</tr>
{/weeks}
</tbody>
</table>
{/exp:low_events:calendar}
{!-- events/index template --}
<div id="cal">
{embed="events/cal"}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($){
$(function(){
$('#cal').on('click', 'caption a', function(){
$('#cal').load(this.href.replace('events', 'events/cal'));
return false;
});
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment