You could choose just to have the link text for the actions behind the icons. See the “Listing events’ settings.
Use Css to replace the text with your own images
First switch the default images off and then use css to show your chosen icons instead.
There are various techniques that one can use to replace text with an image. The following was used to demonstrate the above replacement using the plugins html classes.
See the pluggable files in each plugin folder. Use the function there as a base for your new function. Add your function to your custom themes function.php or to your own site specific snippets plugin.
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
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
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).
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
If months (note will show all events in the current month)
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:
Copy the code, edit for you and put in your plugins folder.
Deactivate amr-ical-events-list
Activate amr-test-pluggable
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.
/*
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);
}
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.
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.
Change the content definition yourself. The large calendar uses list type 9 setup as a default. This works with the default css provided. You can modify that or create your own list type and css..
Own list type for calendar
To make the calendar use your list type, add a parameter “calendar=n” to the shortcode, where “n” is your listtype number, so that the plugin knows which listtype to use.
What content goes where?
For the large calendar, the listtype ‘columns’ are not really columns – more like ‘areas’ in the event box. In the default setup,
Column 1 is the day box,
column 2 is what shows on hover of the event if you have the right css.
And of course you can still add your “before” and “after” html to add further styling to the calendar.
Choose which fields and in what order are to be displayed in the first view of the calendar by allocating the fields to column 1.
Column 2 fields are set to appear in the “hover” over the event. EG: Move event times from one to the other as you please.
Example: To show the excerpt instead of the description in the hover box
Go to the settings for the calendar list type
Open up the “Specify fields to show > Descriptive ” section.
Change the description column to 0
Change the excerpt column to 2, add any necessary before/after html to make it work with the css (eg: to make it hover or not)
Update
Note: What actually shows depends (just like post excerpts) on your excerpts setup:
manual excerpts only ? (wp default). If there are no manually entered excerpts, nothing will display
use theme functions or a plugin to create excerpts if there are none
The html and default css have been carefully designed to give you maximum possibilities to style the calendars, while fitting in with your theme and giving you a reasonable default css.
The default css was setup for the 2010 theme. In many cases the #content selector had to be used to override normal table styling. If your theme uses something else, you will need to either edit the customisable css file provided, or edit your theme’s css.
In order to retain html validation and still allow you flexibility (particularly since your content may contain html itself, this limited html choices), divs being the most flexible are used to isolate events and columns.
Selectors are available for the following:
“today” – the day box that is the current date
the weekdays, inparticular you may want to style the weekends. The necessary css is there, but commented out – I thought it looked too busy.
the rightmost day column. The default css will move the hover boxes for the last column in a bit so that they stay on the page.
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]
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
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.
Themes do all kinds of weird and wonderful things sometimes without thinking about the unintended consequences on other html. A classic example of this has been the “unremovable” css bullets.
The icalevents plugin provides a minimal default css with the hope that the html will pick up styling from your theme, enabling the plugin html to blend in with the theme and “belong”.
Sometimes the theme css does not look right when applied to the plugin html, and needs to be “overridden”.
Sometimes the default css is not being used because of the div id’s that your theme uses for it’s content areas.
It is not possible for the default css to deliver a perfect solution for all themes. The css offered works with the default 2010 theme. You should have some css skills and familiarity with the firefox firebug tool will help.
Custom CSS
If the default css does not work with your theme, the plugin provides some options. These are accessed under “Listing Events” / “General Options”. Please note that these settings apply to ALL list types.
1.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
that you have modified your theme’s css
2.Or Create a custom css file for the plugin.
Copy/Download the defaut css style in your websites upload folder. (Do not edit the css file in the plugin directory as it will be overwritten).
Tailor it to suit your theme, then (put it back in the uploads/css folder). Maybe change the selectors (the #content maybe ) to whatever your theme uses.
Choose the custom file from the list of files in dropdown list in the main
The plugin will then add that css file into the website’s css which ever theme you are using.