I'm using Solspace Calendar. I have a very clean monthly calendar where I am using a tool tip to display the events and their details. I also have 3 event categories and I would like to display them with special colors (I am using classes to define the colors). I have the tool tip working wonderfully within the calendar but since i cannot add html(other than a
tag) to the title of the span to use as the tooltip (this is where the event information is pulled into), i'm having a difficult time thinking this out. I want to be able to format the tooltip to show each event in the color that is specified for the category. So really 2 things much happen and I would love to see if anyone else can help me get there.
- add a conditional to the
{events}
tag pair that displays the event of a particular category. Maybe something like{if category_id == "3"} show this event {/if}
- add a class to the event if the category is specified.
I've tried a dozen ways, but I am sure I am not seeing something. So any suggestions would be GREAT!!! here is my code currently, without the conditionals or the color class.
{exp:calendar:cal date_range_start="year-month-01" date_range_end="1 months"}
{display_each_month}
<table class="calendar">
<thead>
<tr>
<th>{date format="%F %Y"}</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<div class="wrap">
<table id="fc_inner">
<thead>
<tr id="days_of_week">
{display_each_day_of_week}
<th>
{day_of_week_short}
</th>
{/display_each_day_of_week}
</tr>
</thead>
<tbody>
{display_each_week}
<tr>
{display_each_day}
<td>
<span data-tooltip class="has-tip" title="
{display_each_hour}
{events}
{event_title} - From: {event_start_date format="%g"} To: {event_end_date format="%g"}<br>
{/events}
{/display_each_hour}
">
{date format="%j"}
</span>
</td>
{/display_each_day}
</tr>
{/display_each_week}
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
{/display_each_month}
{/exp:calendar:cal}