JEvents 2.0.x implements layout editing for the monthly calendar cell and the monthly calendar tooltip. These are more complex to customise effectively than the list layout or event detail layout. This short note describes how to do this for the club layouts (Iconic, Extplus and Ruthin) as well as those that come with JEvents (alternative, default, ext and geraint).
IT IS ESSENTIAL THAT YOU SWITCH OFF YOUR WYSIWYG EDITOR WHEN EDITING THESE LAYOUTS (i.e. DISABLE IT FOR YOUR ACCOUNT AND LOGOUT/LOGIN) . THE REASON IS THAT JOOMLA WYSIWYG EDITORS WILL ATTEMPT TO CLEAN UP THE HTML AND THIS WILL CHANGE THE STYLE SETTINGS IN PARTICULAR.
In addition make sure you use the Joomla Tooltip setting in the JEvents config - layout editing is not supported for the deprecated overlib tooltips.
Calendar Cell
PLEASE NOTE THAT THE JOOMLA SYSTEM SEF PLUGIN REFORMATS THE HTML IN THESE EXAMPLES - THERE SHOULD BE NO / IN FRONT OF {{Link:LINK}} IN THE FOLLOWING CODE SAMPLES.
Extplus, Iconic & Ruthin Layouts
The following code snippet recreates the default layout of these calendar cell for Extplus, Iconic and Ruthin. If you wish to use the tooltip then it is essential that you preserve the tooltip span around any links that will trigger a tooltip.
<div class="eventfull">
<div class="eventstyle" style="border-left-color:{{Event background color:COLOUR}};border-bottom-color:{{Event background color:COLOUR}};">
<span class="editlinktip hasjevtip" title="{{Tooltip:TOOLTIP}}">
<a class="cal_titlelink" href="/{{Link:LINK}}">{{Event Time:EVTTIME}} {{Title:TITLE}}</a>
</span>
</div>
</div> Alternative
The following code snippet recreates the default layout of these calendar cell for Alternative If you wish to use the tooltip then it is essential that you preserve the tooltip span around any links that will trigger a tooltip.
<div style="width: 100%; border: 0pt none; padding: 2px;">
<div style="padding: 0pt 0pt 0pt 2px; border-left: 8px solid {{Event background color:COLOUR}};">
<span rel=" " title="" class="editlinktip hasjevtip" title="{{Tooltip:TOOLTIP}}">
<a class="cal_titlelink" href="/{{Link:LINK}}">{{Event Time:EVTTIME}} {{Title:TITLE}}</a>
</span>
</div>
</div> Default
The following code snippet recreates the default layout of these calendar cell for Alternative If you wish to use the tooltip then it is essential that you preserve the tooltip span around any links that will trigger a tooltip.
<div style="border: 0pt none; width: 100%;">
<div style="padding: 0pt; background-color: {{Event background color:COLOUR}}; color: {{Event foreground color:FGCOLOUR}}; width: 100%;">
<span class="editlinktip hasjevtip" title="{{Tooltip:TOOLTIP}}">
<a class="cal_titlelink" href="/{{Link:LINK}}">{{Event Time:EVTTIME}} {{Title:TITLE}}</a>
</span>
</div>
</div> Ext
The following code snippet recreates the default layout of these calendar cell for Alternative If you wish to use the tooltip then it is essential that you preserve the tooltip span around any links that will trigger a tooltip.
<div class="eventfull">
<div style="padding: 0pt 0pt 0pt 2px; border-bottom-color: {{Event background color:COLOUR}};" class="eventstyle">
<span class="editlinktip hasjevtip" title="{{Tooltip:TOOLTIP}}">
<a class="cal_titlelink" href="/{{Link:LINK}}">{{Event Time:EVTTIME}} {{Title:TITLE}}</a>
</span>
</div>
</div>
Geraint
The following code snippet recreates the default layout of these calendar cell for Alternative If you wish to use the tooltip then it is essential that you preserve the tooltip span around any links that will trigger a tooltip.
<div class="eventfull">
<div style="border-width: 0px 0px 1px 8px; border-color: {{Event background color:COLOUR}}; padding: 0px 0px 1px 2px;" class="eventstyle">
<span class="editlinktip hasjevtip" title="{{Tooltip:TOOLTIP}}">
<a class="cal_titlelink" href="/{{Link:LINK}}">{{Event Time:EVTTIME}} {{Title:TITLE}}</a>
</span>
</div>
</div> Calendar Tooltip
All the JEvents layouts use the same tooltip code.
<div class="jevtt_title" style = "color:{{Event foreground color:FGCOLOUR}};background-color:{{Event background color:COLOUR}}">{{Title:TITLE}}</div>
<div class="jevtt_text" >
{{Tooltip time:TTTIME}}
<hr />
<small>{{Link Start:LINKSTART}}Click to open event{{Link end:LINKEND}}</small>
</div>