looking for help with Low Events Calendar and Entries combined
I'm working on a calendar that has a data-tooltip instead of linking off onto another page. But i'm having trouble displaying the events in the tooltip on hover.
Here is what i have:
[code]
{exp:low_events:calendar channel="events" date="{segment_3}" }
{this_month format="%F %Y"}
{weekdays}{weekday_1}{/weekdays}
{weeks}
{days}
{if events_on_day}
{day_number}
{if:else}
{day_number}
{/if}
{/days}
{/weeks}
{/exp:low_events:calendar}
[/code]
Any ideas on how to get only the events for that day to show in the data-tooltip?
Replies
Low 15 Jan 2014 08:07
The Calendar tag will not generate entries (the events) themselves. Instead you could use the Calendar tag together with the Entries tag (as separate tags) and use JavaScript to bring them together.
See this example, where someone used JS to move the events into the calendar cells: https://gist.github.com/jamiepittock/...
Rebecca Chapman 15 Jan 2014 15:44
I found another way to accomplish this. instead of using a data-tooltip, use a modal. That way a completely different div can be called on-click. It will create a pop up instead of the hover tooltip but it will serve the same purpose. :) Thanks for your help!
Rebecca Chapman 15 Jan 2014 16:48
Ok, so I lied just a little bit. I thought I had something worked out, but then realized that I still need to get the {date_url} to output to the events entries date="". Since I'm using the modal to create a separate div and pop up to list the events on a given date couldn't I just use php to essentially copy the {date_url} into the date="" on the events entry tag? If so, how would that look? I thought i had it worked out in the following but it's not parsing correctly.
{exp:low_events:calendar channel="events" date="{segment_3}" }
<table class="responsive">
<caption>
<a href="{path="calendar/month/{this_month_url}"}"><strong>{this_month format="%F %Y"}</strong></a>
</caption>
<thead>
<tr>
{weekdays}<th scope="col">{weekday_1}</th>{/weekdays}
</tr>
</thead>
<tbody>
{weeks}
<tr{if is_given_week} class="given-week"{/if}>
{days}
<td class="{if is_current}current{/if}{if is_given} given{/if}{if is_today} today{/if}" id="date-{day_url}">
{if events_on_day}
<a href="{day_url}" data-reveal-id="events">{day_number}</a>
<?php $dateid = date ('{day_url}'); ?>
{if:else}
<span>{day_number}</span>
{/if}
</td>
{/days}
</tr>
{/weeks}
</tbody>
</table>
{/exp:low_events:calendar}
<div id="events" class="reveal-modal small" data-reveal>
<ul>
{exp:low_events:entries channel="events" date="<?=$dateid?>"}
<li>{title}<br>{event_description}</li>
{/exp:low_events:entries}
</ul>
<a class="close-reveal-modal">×</a>
</div>
Low 16 Jan 2014 09:00
Using PHP like that won't work. You'd need it to be on output in the first tag, and on input in the second, so no dice.
But, if you're already using JS, why not use Ajax to load up a template for events of that day? Let the day number in the Calendar tag link to a different template, containing the Entries tag, so it loads up a chunk of code with events for just that day, then load that up into your modal.
Rebecca Chapman 16 Jan 2014 14:26
Now that my friend is brilliant. Thanks! My brain has been in a fog and sometimes it helps to 'talk' it out! :) Muchos Gracias Mi Amigo!