Using Ajax to navigate through a Low Events calendar for ExpressionEngine

events-cal.html

{!-- 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.html

{!-- 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>