You could choose just to have the link text for the actions behind the icons. See the “Listing events’ settings.
Switch images off
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.
text replaced with image
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.
Events can be grouped by date formats or by categories, tags or custom taxonomies.
Events can be grouped by days, weeks, months and some funkier options that no one will probably ever use, but I liked the challenge! Actually I imagined one could do some seasonal styling perhaps? each grouping has it’s own css classes, and date/time format
Grouping also allows one to do timetables (grouped by day), weekly schedules, or monthly, quarterly or seasonal event views.
I received a question about whether the plugin could style dates in the way the little purple date is shown in the header image of the website and the plugins wordpress page.
a real life example
The calendars shown in the header are taken from real live examples of the plugin being used in various sites. The sites will in many cases have added custom css to style the events lists to match their themes.
With a combination of the date and time formats in the settings for each list and some css, almost anything is possible.
The key is that one can add extra characters into the php date format string. If the characters are the same as a date format character, one can ‘escape’ them with a preceding backslash.
Sooo…. one could for example add some html to isolate part of the date for css styling purposes. The image below shows the date and time format settings for a event list. Note the format string for the day. It surrounds the month with a span.
\<\s\p\a\n\>M\<\/\s\p\a\n\>j
Date format settings for a event listtype
Then one can spice it up with some custom css. To prove this, I have used the power of the firebug browser add-on to add some element css to show you what could be done. I’d put the text-align: center at a higher level actually – no need to repeat it.
You of course would add the css for the event date class and the span within it to your theme or to a custom calendar css file.
Example styling of a month and day (prof of concept facilitated by firebug browser add-on)
Sometimes the only way to really sort a table width out is to “fix” the width of the table and/or the table cells. Now this the plugin has to leave this to you – some people have wide content areas, some not. Some have lots of info displayed, others have minimal.
The plugin has no way of knowing what size would work best for you.
I suggest that you use something like firebug to see what your theme is doing (or not doing!) and then google table+css+width for ideas on what might work with your theme. You know the size of content area that your calendar or agenda list must fit into and perhaps simply setting the width of the table and/or the table cells will be the answer.
Update fields to show so that only Starttime and Summary have column = 1, all else =0.
Update StartTime order = 1, Summary order = 2
Add a ‘space’ either “ ” (non breaking space) or “ ” a normal space.
If you anticipate a very large number of events per month, go to the “Define maximums” and enter a max number of events approx double what you expect.
Click ‘Update’ to Save your listtype.
List type screen
Shortcode parameters
In your largecalendar page, enter the shortcode, using your list type number. Optional: Decide whether to you want a dropdown box or not. See parameters available.
[largecalendar listtype=13 show_month_nav=1]
The css
Full event title displayed
The default css will allow the full event title to be displayed. If you want to trim it so the event stays on one line, you need to add some custom css.
#events_wrap .largecalendar tbody td div.event {
overflow:hidden;
white-space:nowrap;
font-size:10px; /* make text smaller - depends on your theme */
}
Wordpress.com custom css editor screen
Appendix:
Option: Copy and Paste ALL of this text string into a list type import field in your “manage listtypes” screen:
A horizontal weekly calendar is now possible (in a few hours anyway).
It was requested a while back by autrice. Then I saw the Sydney 2011 film festival schedule and I thought…
… hmmmm we could do that.
Sydney Film Festival Schedule Styling – possible with amr-events
From amr-ical-events-list version 4.0.5 onwards use shortcode [weekscalendar]. You will need the new list type 11. It is not exactly the same as above. If you really want the sff.org style, only show the summary and the event date and times. Set all other columns to 0.
Don’t panic if you do not want to reset your list types to get the new defaults. Simply use your local test server (You do have one don’t you? you don’t do everything live …. no of course not, I didn’t really think so.)
In your test server, reset the list types, then copy list type 11 over to your main server (after suitable testing etc.)
Colourit with some category, tag or taxonomy styling.
Version 4.0.5 also offers css classes by id, – so that you can change the category slug with breaking your styling. All id’s will be prefaced with ‘t’ (for term,tag, or taxonomy or caTegory :) )
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
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
Two columns using multiple shortcodes with selection by months
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.
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);
}
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.
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.
