Category Archives: How To

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

External ics files timing out?

Slow server? Ics refresh problems too frequent?

In version 4.0.24 of amr-ical-events-list, the default http timeout in wordpress can be extended for ics fetches.  5 is the wp default.

Note: using a large number may mean that your calendar page will be slow when it is time to refresh the ics files.  Consider the cache frequency too.

See also

Advanced admin settingfor timeouts

How to tell if necessary?

If you occasionally see a little exclamation mark on your calendar page – this is an attempt to warn you that  a cached version of the ics file is being used and events may be out of date.  Hover over it to see the message.

Want more info ?

If you are a logged in admin user, add ?debug&refresh to the url and hit refresh.  A debug listing will be produced while it tries to refresh. Scroll down to see the result.

Debug message for logged in admin users
Ics file does not exist

Html in descriptions in ics feed generation

What to do about html in event descriptions?

Some applications will cope with the html, but there are other applications which do not. EG: Google calendar – does not faciliate html nor  issue it in feed.

HTML in the description field is not explicitly forbidden, however it is probably not recommended.  There is some provision for html to be explicitly allowed for, either:

  •  in the description using an ALTREP parameter,
  • or in an ‘experiemental’  X field, X-ALT-DESC,

WordPress allows us to create events with html in them.  So what to do when the ics feed is generated?

Retaining the html – two possibilties:

Link to the html representation:

DESCRIPTION;ALTREP="http://www.example.com/somepath/":This is an example description.

Provide separate field with html representation:

Outlook will recognise:

X-ALT-DESC;FMTTYPE=text/html:<p>This is an example description.</p>

 

This update does both, as well of course ,as stripping the html from the description field in the ics file.  This means images will be stripped too (only for the feed – do not panic!)

More information for the technically minded

 

 

User Interface for entering events

Scott Adams (Dilbert) explains why sometimes entering events (dates) can be tiring.  He puts it down to too many different spatial models.

He also proposes an alternative (a one spatial model) events calendar interface.

Interestingly one commenter offers the google ‘ figure it out from the text’ method.  Perversely that does not work for me.  I have been influenced by my husband to get in the habit of recording the planned date and time in th text as well as in the date fields as a ‘backup’.  Too many tools make it so ‘easy’ to shift an event, that it sometimes happens inadvertently…. If you haven’t recorded the original somewhere… you’re in trouble!

Any way point of the post was to give you all a place to offer any suggestions.  Yes please comment meaningfully if you want to.  If you like the current interface and prefer it to stay that way, please say so too. (hard to please everyone all the time, but I try)

Quite some thought did go into the current amr-events interface:

  • datepicker for dates, but not a time picker (too limiting, not enough value added)
  • flexible date entry if you want – it’ll do its best guess to figure out what you want rather than insisting how you should enter the date.
  • flexible time entry – lots of logic to work out what you want – it is not going to insist on 10:00, you can enter just 10
  • if no time – will assume all day (you don’t have to tick the all day)
  • it’ll echo back the day of week to you when saved for confirmation
  • in settings one choose the date and time entry format.  See also date formats by country
    • english oriented with dd/mm/yy
    • american with that weird month first thing they do
    • europeans who like to adhere to the international standard yyyy-mm-dd
    • 24 hour clock or
    • 12 hour am/pm
    • define the separators
  • Choose also the start of week (Monday, Sunday, Saturday etc)

Like the formerchampions schedule? cut and paste the listtype

There was a question in the forum about how to achieve this bands show schedule:

Example of a listtype for an artist data feed - usable in other scenarios too

It is also demo’ed at http://icscalendar.com/agenda-styles/a-gigpress-listtype/. You can either follow the instructions below, or simply cut and paste the listtype to your listtype overview screen.

Instructions:

  • Either edit and existing agenda style list type, or
  • create a new one, then copy (cut and paste) a existing one into your new one.
  • then….

Configure the listtype as follows:

Fields to show:

Field Column Order Before
EventDate 1 10
Location 2 10
Summary 2 20
url 2 30
Description 3 10
Starttime 3 15 Time:&nbsp;
Map 3 15
Addevent 3 15
Subscribe event(if using amrevents with internal events) 3 15

 Date and Time Formats:

  • Change day to : m/d/Y

 Grouping:

  • Check month is ticked for the grouping

Icon Size

Lastly, if you want the larger icons, go to the general Listing settings => styling and images

  • Check icon size 32
Icon sizes
Set icon sizes

Optionally, you could also fiddle around with your css to make that column 3 a fixed width perhaps?

The listtype preconfigured:

[private]

Please ensure you cut and paste cleanly the whole piece of text:

[/private]

How to add/remove “subscribe to event” or “add to calendar”

There are a number of “subscribe” or “add to calendar” options.  Often these are displayed by default in the chosen list type.

At Calendar Properties Level

“subscribe to the whole calendar”

“add the whole calendar to your google calendar”

At Event or Event Series Level

“addevent”- subscribe to event (internal events)

“subscribevent” – subscribe to a recurring event series (ics file or internal events)

add to google (ics file or internal events)

Adding to a list or widget

You can add them to any list type from the list type settings.

Simply add a non-zero number to the desired fields ‘column’  to make it display.

EG: To add a subscribe link to the upcoming events widget.. The default list type for the widget is list type 4.

Choose whether to display images, and/or the icon size for all list types.

Don’t forget to “Update”!

Pagination or paging through many events

This events or calendar plugin offers various ways to ‘page’ or navigate events in time.  One can also navigate or filter by other ways(categories, taxonomies, authors etc):

  1. semi-pagination(vary days, events, start date)

    semi-pagination
    semi-pagination
  2. look for more” – a simpler google style link

    Look for more events
  3. use the month navigation dropdown form or links

    month dropdown and links
  4. or do your own with html, using the query parameters
  5. ‘Plug’ the semi-pagination function (advanced php users only)

semi-pagination

  • I like to call it “semi-pagination” because it is not normal pagination like the WordPress listing of posts.  Normal pagination has one parameter – the number of pages and the number of events.   Event lists need two ‘drivers’
    1. a time period – the number of days, weeks, or months
    2. the number of events to show
  • It is dynamically generated based on the parameters you used.  If you used days, then it will use days etc
  • The text will be translated if the language translation exist
  • Its links allow the user to vary
    • the time periods
    • the number of events
    • and when to start (ie one can go back and forward in time)
  • Switch it on/off by adding the parameter  to the shortcode:
    • [events pagination=1] or [events pagination=0]

 

Look for more

a simpler google style “look for more”

  • also dynamic in that it will remember the last date displayed and will offer a link to view more events from that date on
  • The default text will be translated if the language translations exist.
  • the text can be customised in the settings.  Multi language sites should leave the default text and rather use the translation files.  To do this for english  see “an accent for your website”
Look for More events
Look for More

Month navigation

  • These appear by default in some list types
  • Can be switched on/off with parameters
    • show_month_nav=1
  • Can be added manually by using additional shortcodes before / after 
    • [month_year_dropdown] – displays the month and year drop down box where ever you put the shortcode.
    • [month_prev_next] – displays the next and previous month links where ever you put the shortcode – eg: after the events shortcode maybe? eg [month_prev_next][events]
    • Note some additional shortcodes only available with amr-events plugin.  For the free version see ‘write your own html links’ below.)

Write your own html links

Linking to the event list and passing parameters, one can alter the display.  Use the offset parameters to shift the start of the display, either forwards or backwards in time

  • startoffset=n, or startoffset=-n
  • daysoffset=n, or daysoffset=-n
  • monthsoffset=n, or monthsoffset=-n

To show more or less events, or other components the parameters that could be useful, possibly in combination are:

  • days=n
  • months=n
  • hours=n
  • events=n

Examples:

Next Month   Previous Month

Next 30 days   Previous 30 days

Show more days   Show more events

  • Add the html before or after the shortcode in your page html.
  • This html cannot be translated as it is straight html
  • See the html generated by the pagination code as a starting point:
Pagination Html
Pagination Html

Plug the semi-pagination function

If you are considering this option. You should

  • know php well,
  • know what a pluggable function is
  • and know how the plugin uses the various time and number of event parameters to navigate through time

See the existing function amr_semi_paginate in amr-ical-events-list/includes/amr-pluggable.php.  Note the global variable to receive the parameters or limits used.

First published Jan 2010, now updated and republished.

Very simple event information on single event view

Our Mission:

  • to greatly simplify the event information master data displayed (no recurring next dates)
  • and surround the whole lot with  h3 heading tags
A sample mission

Steps:

  1. Change (or create a custom list type).  Yes I know we are not showing the next dates, but it gives us control over the date and time formats
  2. Change the event information settings

The list type

  • Easy way: just grab the code at the bottom of the post  and paste it in to the appropriate list type in the ‘manage list type’ screen.   It is better if you have already added a new list type or change the existing one.
  • Do it your self:
    • set the date and time formats – that’s the main thing! If you do not want time to show, just blank out the time format
    • Update

The Event information

  • Choose the list type created  above
  • Set the Before /after html with the h3 open and closing tags
  • Choose DTSTART and EndDate (requires latest version of amr-events or fix as noted in forum)
  • Switch everything else off

 

and that should do it.

Notes:

  • If it is a one day all day, the EndDate will be blank.
  • DTEND is not good for ‘all day’ events as it is the ‘technical’  DTEND as per ics spec. All day eventss will appear one day longer than you think (they ‘end’ at the start of the next day :) )

Appendix:

Optional: Copy and Paste ALL of this text string into a list type import field in your “manage listtypes” screen:

Customise Large calendar, simplify

A response to a request on the forum:

Aim: to mimic the google calendar view
Live Result Example: http://www.icscalendar.com/box-calendars/simple-large-calendar/

A simple large calendar
A simple large calendar

Characteristics:

  • Start time and title, no hover box, event detail chopped off to one line

Changes to make

  • The listtype
  • The shortcode parameters (optional)
  • The css (maybe – depends on your theme)

The listtype

Configure a large calendar list type or simple copy/paste from list type the listtype text at the bottom of this post.).  To do it yourself, see detailed instructions for:

  • 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 “&nbsp;” (non breaking space) or “&#32;” a normal space.
  • If you want am/pm time, open dateTime formats and change time to
    “g:ia”.  See http://php.net/manual/en/function.date.php for more options
  • 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.

Trimmed events details - overflow hidden

Either use the custom css file provided (download, edit, ftp upload and then choose it  from the plugin settings. For instructions, see https://icalevents.com/3591-custom-css-for-event-lists/

OR (easy option)

If  editing css, file structures and ftp is not your area of expertise, then
use the wordpress.com custom css plugin provided by automattic
and add something like:

#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:

Horizontal Weekly Calendar

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
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.)

Colour it 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 :) )

Maybe add some css like:

#events_wrap .eventscat,
#events_wrap table tr.eventscat td.amrcol1 {     
 border-left: solid 5px green;
}
#events_wrap table tr.t1 td.amrcol1 { 
 border-left: solid 5px red;
}

Have fun…

Oh, by the way, you always could do a weekly vertical agenda too, I’ve added a sample listtype for that too (no 12).

 

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);
}