1

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.

  1. 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}
  2. 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}
1

Within the {events}{/events} tag pair, use the {categories}{/categories} tag pair as you would with {exp:channel:entries}, and use it for your needs:

{categories}{if category_id == 3}Some class{/if}{/categories}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.