Home› Blog›

Calendar 2.0 brings images, tool tips, themes, a sidebar widget and more!

Posted by Chris Reynolds on Monday, August 13th, 2012

The new calendar add-on is now available to download in the forums for registered users of the Personal license and above.  Some of the new features include:

  • New calendar sidebar widget
  • Tool tip short descriptions (which support images in event descriptions)
  • Easy to use custom event category colors
  • Support for jQuery UI’s Themeroller
  • Custom color options
  • calendar thumbnail images

Calendar SettingsUpdate to the latest version of Event Espresso (3.1.24 or above) and the latest version of the Calendar add-on (2.0 or above). After activating, navigate over to the calendar settings page. You’ll be greeted with a brand new set of options to play with.

Some of the new features work with features you may have already been using. For example, the tooltips use the “display short descriptions” feature set in Event Espresso ? Template settings to display the full event description or just an excerpt. Be sure to use the <!--more--> tag in your event descriptions if you don’t want the full description to display in the tooltip.

 

Calendar tooltip

Calendar thumbnailYou can also enable or disable thumbnail images in the calendar events.*

 

*Note: In some cases, images may appear cut off or overflow into the next row of dates.  We are aware of the issues and are working on a new version that will resolve these issues. Please report any issues you have in the Calendar forums.

Another new feature is the ability to easily add colors to categories of events using a new color picker on the Categories page.  In this way, you can easily change the event background and text colors in your calendar.

Calendar 2.0 also brings jQuery Themeroller to the calendar.  If you’re unfamiliar with Themeroller, you can read up on the project page on the jQuery site.  In short, it’s a framework for building (and using) themes that can be easily swapped in and out or changed and provides a much wider range of design possibilities than the default styles of the calendar or your theme.  You can use one of the default themeroller themes (included with Event Espresso), create your own theme, or build one from the Themeroller site.

The Espresso Calendar is set for a rewrite later this year.  We hope these new features will provide some exciting new features for your event site.  Let us know how your using the new features on your site in the comments below!  If you have any problems or questions, we encourage you to ask in the support forums and we’ll respond as quickly as possible.

Related Articles

Filed under Product & News and tagged , , , , , , ,

2 thoughts on “Calendar 2.0 brings images, tool tips, themes, a sidebar widget and more!”

Share a Reply or Comment

Your email address will not be published.

Need help with Event Espresso? Create a support post in our support forums

Event Espresso
[gravityform id=116 title=false description=false]
<script type="text/javascript">var gform;gform||(document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,initializeOnLoaded:function(o){gform.domLoaded&&gform.scriptsLoaded?o():!gform.domLoaded&&gform.scriptsLoaded?window.addEventListener("DOMContentLoaded",o):document.addEventListener("gform_main_scripts_loaded",o)},hooks:{action:{},filter:{}},addAction:function(o,n,r,t){gform.addHook("action",o,n,r,t)},addFilter:function(o,n,r,t){gform.addHook("filter",o,n,r,t)},doAction:function(o){gform.doHook("action",o,arguments)},applyFilters:function(o){return gform.doHook("filter",o,arguments)},removeAction:function(o,n){gform.removeHook("action",o,n)},removeFilter:function(o,n,r){gform.removeHook("filter",o,n,r)},addHook:function(o,n,r,t,i){null==gform.hooks[o][n]&&(gform.hooks[o][n]=[]);var e=gform.hooks[o][n];null==i&&(i=n+"_"+e.length),gform.hooks[o][n].push({tag:i,callable:r,priority:t=null==t?10:t})},doHook:function(n,o,r){var t;if(r=Array.prototype.slice.call(r,1),null!=gform.hooks[n][o]&&((o=gform.hooks[n][o]).sort(function(o,n){return o.priority-n.priority}),o.forEach(function(o){"function"!=typeof(t=o.callable)&&(t=window[t]),"action"==n?t.apply(null,r):r[0]=t.apply(null,r)})),"filter"==n)return r[0]},removeHook:function(o,n,t,i){var r;null!=gform.hooks[o][n]&&(r=(r=gform.hooks[o][n]).filter(function(o,n,r){return!!(null!=i&&i!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][n]=r)}});</script> <div class='gf_browser_unknown gform_wrapper gform_legacy_markup_wrapper' id='gform_wrapper_116' ><form method='post' enctype='multipart/form-data' id='gform_116' action='/2012/08/calendar-add-on/' novalidate> <div class='gform_body gform-body'><ul id='gform_fields_116' class='gform_fields top_label form_sublabel_below description_below'><li id="field_116_5" class="gfield gfield_contains_required field_sublabel_hidden_label field_description_below gfield_visibility_visible" ><label class='gfield_label gfield_label_before_complex' >What is your first name?<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name no_last_name no_suffix gf_name_has_1 ginput_container_name' id='input_116_5'> <span id='input_116_5_3_container' class='name_first' > <input type='text' name='input_5.3' id='input_116_5_3' value='' aria-required='true' placeholder='First name' /> <label for='input_116_5_3' class='hidden_sub_label screen-reader-text'>First name</label> </span> </div></li><li id="field_116_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_1' >What is your email address so we can follow up with you?<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_text'><input name='input_1' id='input_116_1' type='text' value='' class='medium' placeholder='hello@example.com' aria-required="true" aria-invalid="false" /> </div></li><li id="field_116_2" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_2' >Tell us about your concerns below<span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span></label><div class='ginput_container ginput_container_textarea'><textarea name='input_2' id='input_116_2' class='textarea medium' placeholder='What kind of events are you planning?' aria-required="true" aria-invalid="false" rows='10' cols='50'></textarea></div></li><li id="field_116_6" class="gfield field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label gfield_label_before_complex' >GDPR Agreement</label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_116_6'><li class='gchoice gchoice_116_6_1'> <input class='gfield-choice-input' name='input_6.1' type='checkbox' value='I consent to have this website store my submitted information so they can respond to my inquiry.' id='choice_116_6_1' /> <label for='choice_116_6_1' id='label_116_6_1'>I consent to have this website store my submitted information so they can respond to my inquiry.</label> </li></ul></div></li><li id="field_116_3" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_3' id='input_116_3' type='hidden' class='gform_hidden' aria-invalid="false" value='' /></div></li><li id="field_116_4" class="gfield gform_hidden field_sublabel_below field_description_below gfield_visibility_visible" ><div class='ginput_container ginput_container_text'><input name='input_4' id='input_116_4' type='hidden' class='gform_hidden' aria-invalid="false" value='https://eventespresso.com/2012/08/calendar-add-on/' /></div></li><li id="field_116_7" class="gfield gform_validation_container field_sublabel_below field_description_below gfield_visibility_visible" ><label class='gfield_label' for='input_116_7' >Email</label><div class='ginput_container'><input name='input_7' id='input_116_7' type='text' value='' autocomplete='new-password'/></div><div class='gfield_description' id='gfield_description_116_7'>This field is for validation purposes and should be left unchanged.</div></li></ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_116' class='gform_button button' value='Send my message' onclick='if(window["gf_submitting_116"]){return false;} if( !jQuery("#gform_116")[0].checkValidity || jQuery("#gform_116")[0].checkValidity()){window["gf_submitting_116"]=true;} ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_116"]){return false;} if( !jQuery("#gform_116")[0].checkValidity || jQuery("#gform_116")[0].checkValidity()){window["gf_submitting_116"]=true;} jQuery("#gform_116").trigger("submit",[true]); }' /> <input type='hidden' class='gform_hidden' name='is_submit_116' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='116' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_116' value='WyJbXSIsIjBiNjdjZjkyMDUzOWUxOWY5Y2NiZjIwMzM4YjA1Mjk4Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_116' id='gform_target_page_number_116' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_116' id='gform_source_page_number_116' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> <p style="display: none !important;"><label>&#916;<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="ak_js" value="64"/><script>document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div>