Tag Archives: style

Events and css3 style columns

I had a request recently about being able to list the events in ‘columns’.  I took this to mean the css3 idea of columns, as of course in  many list types, the event details are in columns.

After allowing the brain to ferret away at the idea, it turns out there are a few different ways to do this with the plugin.

The css 3 way

Using css3 multi columns

Limited browser support, however you could decide to go with the graceful degradation idea where it will still look okay in the other browsers, just not two columns.  See


  • http://www.quirksmode.org/css/multicolumn.html,
  • http://www.standardista.com/css3/css3-columns-browser-support,
  • and http://thebrowsereview.com/2011/css3-multi-column-layout-browser-support/

For this to work

  • choose your list type’s ‘html style’ carefully.  If you started with the plugin a while back and have saved options,  you may not be aware of what is all possible now.  check out a clean install or test.icalevents.com
  • Remove the groupings – they look weird in columns.  If the grouping was days, and you removed it, you may want to add back in the EventDate field.

The HTML5 style looks quite nice, as does the lists style, see widget style (listtype4) (without groupings).

Html and Shortcode used:

<div id="multicolumn">[events listtype=6]</div>

Additional Css used:

 -moz-column-count: 2;
 -moz-column-gap: 20px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 column-count: 2;
 column-gap: 20px;

The two shortcodes and some wrapping html way

If the regularity of events, or their number within a grouping and their content length are consistent, this could work.  Choose a way to ‘group’ the events – eg: month? , number of days, category? etc

Two columns using multiple shortcodes with selection by months

If months (note will show all events in the current month)

<div style="width:49%; float:left;">
[events months=1 events=bigenufno listtype=1 calendar_properties=0]
<div style="width:49%; float:right;">
[events months=1 monthsoffset=1 events=bigenufno listtype=1 calendar_properties=0]
Two columns with selection by number of days

If days (example with list type 4)

<div style="width:49%; float:left;">
[events days=20 events=100 listtype=4]
<div style="width:49%; float:right;">
[events days=20 startoffset=20 events=100 listtype=4]

The ‘Count the Events’ way

Only do this if your listing requirements are simple, your events similar in the fields that they have  AND you know php well.  You may be better off letting the plugin do the hard work and use a list type than re-inventing the wheel and trying to anticipate all the sorts of event data and conditions (all days, no end times? etc).  The main part of the plugin has been around for years now and is pretty stable – why start afresh?

If you still want to know how you’d do it….

Many of the plugin functions are now ‘pluggable’. Simply override the amr-list-events function.  If using another plugin to do this, activate your plugin first before activating the events plugin.

Your function will be passed a sorted list of events where the recurring events have already been exploded out.  var_dump each event to see what fields you can use.  You’ll still use the shortcodes and the parameters.

To test a pluggable:

  1. Copy the code, edit for you and put in your plugins folder.
  2. Deactivate amr-ical-events-list
  3. Activate amr-test-pluggable
  4. Reactivate amr-ical-events-list

Go to your calendar page to see the simple list.  Note this example is just a proof of pluggable concept.  I have not done the columns – all you’d require is a for loop for each ‘half’ of events and a floated div for each loop.

Proof of pluggable function
Plugin Name: amr_test_pluggable
Author: anmari
Author URI: http://anmari.com/
Plugin URI: https://icalevents.com
Version: 1.0

Description: test the amr-events and amr-ical-events-list pluggable functions.

function amr_list_events ($events,  $id, $class, $show_views=true) {
global $amr_listtype;

 $no_events = count($events);
 $half = $no_events/2;  //
 $html = 'I have got '.$no_events.' to deal with.  They are already in date time order!';   
 $html .='<div id="mylist">';

 // you could do a for i=0 to $half in one div and then the rest in another

 foreach ($events as $i=>$event) { 

  $html .= '<h3>';
  $html .= $event['EventDate']->format('d-m-Y'). ' ';
  $html .= $event['SUMMARY'];
  $html .= '</h3>';
  $html .='<p>'.$event['DESCRIPTION'].'</p>';
$html .= '</div><!--id="mylist" -->';


Styling of Ical events

One of the features of this plugin is that it offers many css selectors so you can add your own unique styling to events, properties of events, or groups of events.  
The browsers web developer tools like ‘inspect element’ are very handy for seeing what html and css selectors are available and playing with some css. [Firefox, Safari, Chrome]

Example: Styling the summary of a cancelled event with strikethrough

Example of the many different css selectors based on event characteristics

Possible methods

  • Category – A css class has been added to the event row for each ical categories – see version 2.9.2. However not all ical generators allow one to specify the category field (eg: google does not).   A plugin that I am working on to add events in wp, will allow one to allocate categories and tags to an event.
  • Location only if a taxonomy, or tag: Location is a text field in the ical spec.  The ical event listing plugin offers a googlemap link using the location fields (or the geo field).  For this reasonably decent addresses are required.  Css class selectors are not allowed to start with numeric values (as many addresses do).  So….If one attempted to offer styling by location, it would possibly be along these lines:
    • optional – only if specified in the settings?
    • possibly only the first alpha numeric string with spaces (and other punctuation chars) removed before a comma?
      • PM’s residence, 10 Downing Street, London => PMsresidence
      • 10 Downing Street, London => DowningStreet
      • Sydney Opera House, Macquarie Street => SydneyOperaHouse
      • Apt 56B, Whitehaven Mansions, Sandhurst Sq, London => Apt56B
      • Conference Room – F123, Bldg. 002 => ConferenceRoomF123Bldg002

Css selectors:

Style individual events

  • history (the end date and time has passed)
  • future (the start date and time is in the future)
  • inprogress (the start date and time has passed, but not the end date and time)
  • today (the event is in progress today)
  • allday (the event is an all day event)
  • untimed (the component is untimed – not be an event, may be a NOTE)
  • multiday (the event goes over many days , start and end date are not the same)
  • recur (the event is a recurring or repeating event)
  • alt (so that alternating events can be styled differently – zebra styling!)
  • status (the value in the status field for that event will be echoed as a class.  For example: CONFIRMED)
  • type (the type of ical calendar component – vevent | vtodo | vjournal | vfreebusy | vtimezone | valarm, will be echoed as a class )
  • calx (Calendars can be combined, this value will be cal0 for events from the first calendar, cal2 for events from the second etc)
  • categoryIf there are categories in the ics file, or allocated to an event post, they will be echoed as classes in the event html element by name or term id
  • tags, taxonomies – as per category

Style a group of events

The plugin also allows one to “group” events in a variety of ways:weekly, monthly, yearly or by seasons.  The group value will be echoed as a class.  Thus one could style a group of events by:

  • week number
  • sign of the zodiac
  • season
  • month, year, quarter

Style the properties of the event

Each property (eg; summary, start date, location etc) is assigned a corresponding class, so that one can style these uniquely – see the showcase for some examples.  See the settings page or the ical spec for the list of properties.