Created
November 23, 2012 11:48
-
-
Save jamiepittock/4135270 to your computer and use it in GitHub Desktop.
Inject events from low_events:entries into low_events:calendar cells
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{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'}">←</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'}">→</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} | |
| |
{/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(".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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.