Classes for widget

Widget header
.rhc-widget-header :clickable section that opens a body ( rhc-widget-body )
--requires that the item container has class .rhc-accordion-widget-item

Image
With link: rhc-widget-upcoming-featured-image : The img tag with the featured image
Class 'featured-1' is added to rhc-widget-upcoming-item if there is an image.

Without link: fc-event-featured-image

Date start


.rhc-date-start: the format goes in the content of the tag example: 
<div class="rhc-date-start">MMM</div>

.rhc-widget-date : sets the START date with the format specified by the shortcode attribute date_format
.rhc-widget-time : set the START time with the format specified by the shortcode attribute time_format

.rhc-widget-end-date : sets the END date with the format specified by the shortcode attribute date_format
.rhc-widget-end-time : set the END time with the format specified by the shortcode attribute time_format

.rhc_date : parser will look for tags with this class, then look for data-fc_field ( expects start or end ) and format according
to the value set at data-fc_date_format
* actual formatting occurs in the browser.
** it does not takes into consideration the format passed by the shortcode.

All day events

The following classes are removed from dom( server side ):
rhc-widget-time
rhc-widget-end-time

.rhc-allday-hidden ( adds .fc-is-allday if its an allday event) : If you do not want them removed from dom, use class 'rhc-allday-hidden' instead.
It adds the class 'fc-is-allday' to itself and the holder class 'rhc-widget-upcoming-item', then you can use css to hide them.

Date/Month/Year diferent conditional classes

.if-different-date : if the event start and end date are diferent the parser will look for this class and add the class 'is-same-date'
.if-different-date-r : same as before but instead removes the node.
.if-different-month
.if-different-month-r
.if-different-year
.if-different-year-r

Post title Link
In an anchor tag use .rhc-title-link it will set the title as the tag content, and set the href attribute.

Event description
rhc-description
If the description is empty, any element with class 'rhc-description-empty' will be added the class 'rhc-description-empty-1'
Time format
<span class="rhc_date" data-fc_field="start" data-fc_date_format="h:mm tt"></span>

Event and text color
 data-post_meta_attr="fc_color,data-fc_color|fc_text_color,data-fc_text_color"
This will get the postmeta value of fc_color and assign it to html data-fc_color, it has no use unless
the acompanying javascript makes use of it, like the filling header animation in the first custom widget. widget_custom_accordion.php

on the other hand:
data-post_meta_styles="fc_color" data-post_meta_format="border-left: 5px solid %s;"
allows to set the style attribut of the element with the value of fc_color and using post_meta_format


Taxonomy term loops, when there are more than one term
1. add a holder with the following attributes:
 data-tterm_loop="mytaxonomy" data-rnoe="rnoe"
 
 where mytaxonomy is your taxonomy.
 data-rnoe="rnoe" removes the node from dom (server side).
 
2. inside the term loop use the following attributes to display the taxonomy label.
data-taxonomy="organizer" data-field="singular_name"
Observe that this is not the term name, but the taxonomy. if the taxonomy is Category, then Category is display. 
 
3. to display the current term:
data-tterm="organizer" 
 
4. if the taxonmy has metadata (only Calendarize It!). use:
data-tterm_meta="organizer" data-fields="phone" data-format="%s" data-rnoe="rnoe"
where "organizer" is the taxonomy
"phone" is the metadata
data-format can contain an encoded wrapper
data-rnoe will remove the node if the field is empty( server side ).
 
4.a if the data-fields contains a comma separated list of fields use the data-format attr to define a format to use
for displaying the fields,  it passes them in the same order to the php sprintf function, refer to the php manual for sprintf on format you can use. 
 
 example:
 <div class="rhc-organizer" data-tterm_loop="organizer" data-rnoe="rnoe">
	<div class="rhc-organizer-body">
		<h3 data-taxonomy="organizer" data-field="singular_name">[ORG SINGULAR NAME IS INSERTED HERE i.e. Organizer]</h3>
		<p><strong data-tterm="organizer">[A TERMNAME Like "RightHere" or "John Doe"]</strong></p>
		<p data-tterm_meta="organizer" data-fields="phone" data-format="%s" data-rnoe="rnoe">[a PHONE]</p>
		<p data-tterm_meta="organizer" data-fields="website,website_nofollow,websitelabel" data-format="<?php echo esc_attr('<a href="%s" %s>%s</a>')?>" data-rnoe="rnoe">[WEBSITE LINE]</p>												
	</div> 
 </div>
 
 Google map 
 
 rhc-icon-map  : icon to open google map inline
 
 			<div class="rhc-gmap" 
				data-type="interactive"
				data-gmap_taxonomy="<?php echo RHC_VENUE;?>" 
				data-size="300x150" 
				data-zoom="15" 
				xdata-maptype="ROADMAP" 
				data-ratio="4:3"
				data-rnoe="rnoe"
				>
			</div>            

 
 Ical button
 
 rhc-icon-ical : button to download the .ics file
 
 Clear an inline style: data-css_clear
 data-css_clear="opacity" style="opacity:0;"