Category Archives: How To

Notes on how to achieve various effects when working with either event plugin.

Style events by category

Finally someone wants to use the category to style their events.  Yeah!!

As of the latest version you can do this with your remote ics file (free version) too if the ics file has categories.  If using amr-events,  taxonomies and tags can be used to.

You’ll need to do one of

  • a custom css file, or
  • use the safecss plugin (the wordpress.com custom css plugin ), or
  • update your theme’s css (beware of upgrades)

Example with border colours

I like the Sydney Film Festival css (not my plugin, although you can do something similar now)

Sydney Film Festival Category Styling

The plugin issues a bunch of css classes for an event;

<div class="event future recur concerts moving streetfight t47 t54 t55">

These css classes are categories by term id: t47 t54 t55
These css classes are categories by slug:  concerts moving streetfight

The other classes indicate that it is an event (not a task or note), it is in the future (not past, or today), and that it recurs.

To style your categories like that with my plugin and the default 2010 theme, add something like this to your custom css:

#events_wrap div.t## {	border-left: 5px solid #F7931D;}

where t## is your termid or category id.  It may be safe to use id’s, in case you decided to change the category name and slug and forget that it will mess up your css.   The id will still work.

#events_wrap div.yourcategoryname {	border-left: 5px solid #F7931D;}

Example with text colours:

The following example is specific to someone’s website.  You’ll need to

  • use your category or taxonomy names
  • check what selectors will work you and for your chosen listtype.
Events coloured by category

Css added to the default css:

/* custom css */
#content table.largecalendar .spanish  a.url {
	color: #F7931D; /*orange */
}
#content table.largecalendar .mandarin  a.url,
#content table.largecalendar .mandarin  a.url:visited {
	color: #EC5577; /* pink */
}
#content table.largecalendar   a.url {
	font-weight: bold; /* maybe bold them all too ? */
}

Note:

Check whether you need to override your theme’s ‘active’, ‘hover’, ‘visited’ states too as per the mandarin line above.

Custom Css for event lists

How to use custom css without losing it when there is an upgrade:

See  “Listing Events” / “General Options”.

Option: Do not generate any css, use theme css only.

The expectation here is that either

  • the plugin css is not required – the html looks fine in your theme, or
  • you have added some custom wordpress css
  •  you have modified your theme’s css

 

Deprecated Option: Create a custom css file for the plugin.

  • Copy/Download the defaut css style .
  • (Do not edit the css file in the plugin directory as it will be overwritten when the plugin is upgraded).
  • Edit the plugins css file (copy/download it, tailor it to suit your theme, then load it ti the wp-content/ uploads/css folder.
  • Return to the “listing Events” settings and choose the custom file from the list of files in dropdown list in the main. Update.

The plugin will then add that css file into the website’s css which ever theme you are using. You may need to force your browser to refresh changes to stylesheets. In Firefox pressing “Control Shift R” will force the stylesheets etc to be reloaded.

Export, import, copy, paste

A new page popped up where the  “configure list type”  page used to be.  This is a list type management overview page.  Click on a list type name to get to the configure list type page for that list.

List type overview screen

Now you can share your list type definition (or of course just copy and paste from your test site to your main site).

For example – would you like to try a daily, sort of vertical timetable like in the image below?

  • grouped by day
  • showing the title, but not the description
  • no start date  (no need because the date is in the grouping line)
  • show end date if it exists, in case it it is a multi day long event
  • showing all the icon links in one line (note recurring events have an individual ics, as well as the full series ics)

A configured list type to demonstrate the copy feature

Yes?

  1. select the FULL string below and copy it (Control C)
  2. paste it (Control V) into a ‘spare’ list type’s import field in the overview page.
  3. Update.
  4. Preview it or use it in a shortcode [events listtype=n].

Note:

  • Images and css are set at overall settings (see “listing Events”, not at individual list type.
  • Additional optional tweaks in the shortcode parameters if you want a clean/lean look
[events listtype=x show_month_nav=0 headings=0 calendar_properties=0 show_views=0]

How to set up event taxonomy widgets

Range of taxonomy widget possibilities

Taxonomies are potentially very powerful to offer a variety of grouping or selection of events.

  • Events by Region or City? Make it hierarchical and you could go from state, to region to city
  • Events by Sport Type?
  • Lists, hierarchical, tags, dropdown
  • Subsets

Steps:

1. In settings, create a taxonomy for events
2. In the events or posts menu, create values for your taxonomy
3. Assign some events to the taxonomy (edit event)
4. Setup a calendar or agenda page, note the url as your calendar url.
5. Drag the “Event Taxonomy Archives” widget to the sidebar used on the calendar page and configure the widget.  Remember to add the calendar url to the widget settings.

Taxonomy widget settings

Event taxonomy widget on one page only?

If you only want the widgets to display on the calendar page and nowhere else, then you’ll need some php and wordpress template skills :

1. register an extra sidebar in your themes functions.php
2. create a template page (eg: copy your main page.php) and instead of he main sidebar, call the alternate sidebar in your new template page
3. When you create your calendar page, choose your new template

Ical Events and default URLs for the widget

Event Description as href title - hover text
Event Description as href title – hover text

 Using amr-events with internal events?

  • Your events all have a link to their post or custom post type.
  • You can switch the hover text off (see widget settings)

Using amr-ical-events-list (or an external ics file)?

In an ics file sometimes (quite often?)  there is no event URL.  To deal with this, you have the following:

  • one can specify a default url (such as a calendar page) , so that if people click on the event in the widget, they go to the default event url.  (See below for configuration)
    • either for the list type
    • or in the widget settings

Configuration of the Default Event URL for the widget events

 

Specify the List Type to use for the Widget
Specify the List Type to use for the Widget

 

Default event url in listtype settings

Custom html style file for events

The purpose of this post is to explain the custom html style file option.  There are already many html options.  Please explore those first before resorting to your own.

This option is for advanced users only with good html and css knowledge and very specific requirements.

Html styles:

A number of html styles or structures in which to report events have already been defined for you.  The box calendar styles have some very logic also attached to them.

Html style options

 

custom html actvation
custom html actvation

If you choose the custom option,

  1. copy the sample provided to your uploads folder. it’s in the plugin folder or here: amr-ical-custom-style-file-example
  2. edit it very carefully, ensure you have balanced tags.
  3. note the unclosed tags allow for classes and id’s to be added
  4. Consider whether you will have html in your event content and choose your html carefully to avoid having invalid nested html
  5. enter the part of the url after the wp-content/uploads
  6. be sure to choose the ‘custom’ option when you want it to take effect.
  7. Test thoroughly with a complete set of event data and of course VALIDATE the html.

Other formatting options

At your disposal, tested, with valid html etc are:

  • the ability to order fields anyway you like using the column and order fields of the “specify fields to show” in the listtypes
  • the ability to add text or html  before and after each field, if the field has value
  • a variety of meaningful css tags surrounding events and their fields and the ability to add your own css file to achieve your own styling
  • pluggable formatting functions for many fields (if you need another, just ask –  it will probably be in the next upgrade)

List Types – specify fields:

Specify which fields to display in which order, add before and after html

Css tags:

Example of css tags available

So really you’d have to have some pretty unusual requirements or be pretty perverse to reinvent the wheel and do your own html style file.

 

 

How event timezones work

No timezones need to be specified anywhere if

  • you have set your wordpress timezone (see Settings > General)
  • your events are all in that timezone

Events in a different timezone

If you do wish to enter a event in a different timezone, or display a calendar in a different timezone, this is all catered for:

  • If a timezone is specified when entering the event, the date and time will be saved as in that timezone and any recurring instances will be generated using that timezone (to ensure correct handling of daylight saving).
  • Default displays will convert the time to the timezone of the website
  • Display timezone can be overwritten with a shortcode parameter
  • A timezone switcher between website timezone and shortcode timezone can be shown in the calendar properties

Optional: Specifying a event timezone, or a floating time
Optional: Specifying a timezone, or a floating time

Time is converted to website timezone as default
Time is converted to website timezone as default

Optional settings to show a timezone switch link or icon
Optional settings to show a timezone switch link or icon

A Timezone Icon/Link in the calendar properties

Synchronicity, event storage and accessing events via the loop

Synchronicity is the experience of two or more events, that are apparently causally unrelated or unlikely to occur together by chance, that are observed to occur together in a meaningful manner.

Recently within hours of each other I received queries (an email from Chris and a forum post from G470 ) at opposite ends of the spectrum of expectation about recurring events and their storage.    It seems a description of the underlying method of event storage and calculation was necessary for those wanting to do something different.

If you are not up for a detailed technical discussion, do not panic.  Rest assured that the default settings will deliver  commonly accepted ways of seeing events.   The plugin aims to be both simple and customisable.

For the rest read on…..

Chris asked:

Could I just ask how you are handling recurring events? I have seen a number of plugins take a start date and an end date and then just create a whole bunch of database entries for each event in a recurrence, somewhat bloating the database if you have a number of never ending recurring events. Is your way of handling recurring events more sophisticated?

G470 wants recurring events to show up in his normal loop. (Note: the recurring instances, not the original master event).

How are the events stored?

Each event is stored very similarly to the ICS file lines, while attempting to make maximum use of wordpress features and functions.  Each master event (or VEVENT) is one wordpress post (or custom post).  This allows the use of wordpress features, the wordpress query and other plugins with this plugin.  For example, some plugins you may wish to integrate are:

When a recurring ‘master’ event is displayed as a single post, the plugin calculates and displays the future ‘next dates’ – these change all the time as time passes.  Ditto for multiple event listings. See

In the loop?

The master events are displayed or returned  in the loop (if using standard posts or have configured custom posts to display ) sorted by publish date.     Shortcodes are available to list events sorted by their event instance dates.  In addition the function to list the events (amr_list_events) is pluggable, so you can even do your own thing, although generally it will be easier to customise a list type than to write your own whole display routine.

Event instances are themselves not typically displayed ‘in the loop’ for a number of reasons:

  • the loop normally displays posts by dates that have passed – future posted posts are not displayed ‘in advance’.  Events on the other hand, one needs to know in advance.
  • recurring events may result in multiple instances being shown one after another with unnecessary detail.  There are better ways to advise of forthcoming events (widgets, shortcodes, or calling from within a template file (eg: using do_shortcode();)

How are recurring events generated and displayed?

Event instances are displayable via shortcodes either in a page, a widget or within a master event.  The default display assumes that one is only interested in events in the not too distant future from now or from today.

Note: Although unlike Alice in Wonderlands memory which only works backwards, the amr-events plugin can work forwards and backwards, near or far – you can have your jam tomorrow as well as today and yesterday.  See the shortcode parameters for ideas on what you can do.

Thus the recurring logic is done real time for the most appropriate current window of time.  (IE, with respect to the current start date&time and with respect to configurable limits.)

The administrator sets how many days or months to generate for and how many events maximum.   These limits are used at a general/total level and at a specific level to provide some boundary for infinite events.   Administrators should choose limits that make sense for the frequency / density of their events.

The instances are then generated for that ‘window’ of time using some clever logic.

The logic follows the suggested rules found in various ics documentation with respect to ‘expanding’ and ‘contracting’ by the parts of the RRULE.   Needless to say it took a lot of design and coding to get this stable and coping with almost all the possible RRULES.  That part of the plugin has been around for a few years now and was rewritten at least once!

Mapping of WordPress Fields to ICS fields, or additional ‘displayed’ data

ICS => WordPress post

  • SUMMARY => post title
  • DESCRIPTION => post content
  • DTSTAMP => post published date
  • ORGANIZER => post author (may change later, currently NOT issued in ics file produced)

some ICS lines are stored as wordpress META data:

  • DTSTART
  • DURATION (OR DTEND, not both)
  • RRULE
  • EXDATE
  • RDATE
  • LOCATION (depending which location plugin is used)

Additional data:
Some data is generated at display time.  These are usually the ‘instance’ fields:

  • EventDate
  • EventTime
  • EndDate (of instance)
  • EndTime

Summary

Before feeling that you need to write your own code, please  explore other options

  • see  the variety of list types and the ways that you can customise them before deciding that you need to write your own listing routine.
  • explore other plugins that may integrate well as this plugin was designed to work well with wordpress and the tools that it provides.

This will hopefully save you a lot of time and trouble.

An accent for your website

Have you ever wanted to change the original text for a plugin?  Do you have an audience who would respond to their unique way of speaking being used on your website?

Even if you’re english and it’s in english you can still “translate”.

WordPress is so amazing when it comes to language support (if theme and plugin developers have done their job well)

  • it will use a language file if it finds one
  • it will use a translation if there is one, else will revert to the default language
  • it allows for variations of language (en_US, en_AU etc)

So if you want to talk strine, BBC, cockney, singlish, na’vi or Klingon,  for at least some of the phrases in a plugin or theme, it’s easy. (I’n not bunging it on, you Can la!)

Update on 2016 October 7th:  This is all much easier now with the use of a plugin like https://wordpress.org/plugins/loco-translate/.      Simply ensure that the language for which you are adding a new text / translation is one which is either the main wordpress language or selectable by your users.

Already have system translations in that language?

You may need to override existing translations

  • Drop the code at the bottom of the post into your plugin or theme’s functions.php.
  • Decide which locale code to use-  the default wordpress language for your site (for English it is en_US) or  a variation ? (en-GB, en_au ) .  If not using the default you will need to change your  wp-config.php file to tell your wordpress your preferred locale.
  • Create a translation file with just the texts that you want to translate.  For example using loco translate or code styling localisation plugin (old, still works for me)

    1. Select the theme or plugin,
    2. click add new language and enter the locale code.  It will appear in the list of language files for that plugin or theme or wordpress core
    3. click edit against the language
    4. Scroll to the texts you want to  change or “accentise”
    5. Enter your text as the translation, SAVE
    6. after you have entered your translations, most important – generate the .mo file
  • Put the .mo file into your wp-content/languages folder

Screen shot of language folder

the link to clickenter a translation

It’s a link text, and here it is

the translation in action

Don’t like the menu text ? translate it!

Change the menu text

Have some fun!

Just pick a few key phrases (they must be translateable) to make an impact.

Your website could talk like a pirate just for a day – drop the .mo file in on the day and delete it afterwards!

Danger of upgrades

An upgrade may overwrite your translations, so save it somewhere other than the main plugin language folder .  The amr-events plugins looks for language files with the plugin language text domain in the wp-content/languages folder before looking in the normal place.

The loco translate plugin offers you choices as to where to save your translation files.

Locating your language file for the amr-events plugins in the wp-contents/language should be safe from upgrades.

For other plugins you could write a quick filter function to point to your special file.  WordPress now has several filters that can be used.  The best for this purpose may be:

$mofile = apply_filters( 'load_textdomain_mofile',
                     $mofile, $domain );

Suggested Filter Function

if (!function_exists('amr_load_custom_text') ) { // for filter
	function amr_load_custom_text( $mofile, $domain='' ) {
	//only do for the plugins/themes you want
	if (!in_array($domain, array('amr-ical-events-list', 'amr-events')))
        return $mofile;

    $pathinfo = pathinfo($mofile);
	$custom_mofile = WP_CONTENT_DIR."/languages/" 
            . $pathinfo["basename"];
	if (file_exists($custom_mofile)) 			
			return ($custom_mofile); 
	else  
			return $mofile;
    }
}
add_filter ('load_textdomain_mofile','amr_load_custom_text',10,2 );

Works a treat!

How to remove or change calendar header above event list or box

In most of the sample list types or templates provided, some calendar properties are displayed at the top of the list, including the icon link to subscribe to the whole calendar.

These can be

  1. removed temporarily (or added back if settings are still there) just to see what it looks like
  2. removed while retaining the settings (in case you change your mind!)
  3. removed or changed permanently by changing the settings

Calendar Header with calendar properties
Screenshot with calendar poroperties header

OR

Screen shot of a events list or box calendar with no header

1. What if ? – Remove calendar properties header temporarily

Pretty much all the shortcode parameters can be used in the url as a query parameter to play around with the  display.  This is also how the widgets or shortcodes can interact with each other.

For example:

https://icalevents.com/test/large-box-calendar/large-calendar-with-sidebar/?calendar_properties=0

2. Remove calendar properties header while retaining settings

Simply add a parameter to the shortcode:

  • [largecalendar calendar_properties=0] or
  • [events calendar_properties=0] or
  • [iCal calendar_properties=0]

shortcode parameter

3. Remove or change permanently by changing the settings

  • Find the list type settings,
  • choose the list type you want to change,
  • scroll down till you see Calendar Properties, open it up
  • To remove permanently, set all column values for the field to 0 – this disables the fields.
  • To change set columms, order of fields and before/after text or html as you desire.  Please validate your html afterwards in the page.
  • If there are no properties with a non-zero column, nothing will display