Tag Archives: css3

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:

#multicolumn{
 -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>
<div style="width:49%; float:right;">
[events months=1 monthsoffset=1 events=bigenufno listtype=1 calendar_properties=0]
</div>
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>
<div style="width:49%; float:right;">
[events days=20 startoffset=20 events=100 listtype=4]
</div>

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" -->';
return($html);
}