Category Archives: Html

Notes that relate to creating the html for ‘events to ical’ and ‘ical events list’

Grouping events

amr events, amr ical events list, Css, How To, Html

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.
  • See how to format the date related groupings here.
  • Each grouping comes with css classes so you could for example do seasonal styling of event groups.
  • By adding in the javascript in the settings, one could also expand and collapse the groupings.

Settings

 

Grouping settings
Grouping settings

Styling Groupings – use the css classes

Example of html produced with css classes
Example of html produced with css classes

Html in descriptions in ics feed generation

amr events, Html, Ical RFC5545 / 2445, ,

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

 

 

Ical Events and default URLs for the widget

Html, Notes
Event Description as href title - hover text
Event Description as href title – hover text

 Using amr-events with internal events?

  • Your events all have a link to their post or custom post type.
  • You can switch the hover text off (see widget settings)

Using amr-ical-events-list (or an external ics file)?

In an ics file sometimes (quite often?)  there is no event URL.  To deal with this, you have the following:

  • one can specify a default url (such as a calendar page) , so that if people click on the event in the widget, they go to the default event url.  (See below for configuration)
    • either for the list type
    • or in the widget settings

Configuration of the Default Event URL for the widget events

 

Specify the List Type to use for the Widget
Specify the List Type to use for the Widget

 

Default event url in listtype settings

Custom html style file for events

Html

The purpose of this post is to explain the custom html style file option.  There are already many html options.  Please explore those first before resorting to your own.

This option is for advanced users only with good html and css knowledge and very specific requirements.

Html styles:

A number of html styles or structures in which to report events have already been defined for you.  The box calendar styles have some very logic also attached to them.

Html style options

 

custom html actvation
custom html actvation

If you choose the custom option,

  1. copy the sample provided to your uploads folder. it’s in the plugin folder or here: amr-ical-custom-style-file-example
  2. edit it very carefully, ensure you have balanced tags.
  3. note the unclosed tags allow for classes and id’s to be added
  4. Consider whether you will have html in your event content and choose your html carefully to avoid having invalid nested html
  5. enter the part of the url after the wp-content/uploads
  6. be sure to choose the ‘custom’ option when you want it to take effect.
  7. Test thoroughly with a complete set of event data and of course VALIDATE the html.

Other formatting options

At your disposal, tested, with valid html etc are:

  • the ability to order fields anyway you like using the column and order fields of the “specify fields to show” in the listtypes
  • the ability to add text or html  before and after each field, if the field has value
  • a variety of meaningful css tags surrounding events and their fields and the ability to add your own css file to achieve your own styling
  • pluggable formatting functions for many fields (if you need another, just ask –  it will probably be in the next upgrade)

List Types – specify fields:

Specify which fields to display in which order, add before and after html

Css tags:

Example of css tags available

So really you’d have to have some pretty unusual requirements or be pretty perverse to reinvent the wheel and do your own html style file.

 

 

Events plugin with pluggable functions

How To, Html

The next release of this wordpress events plugin will have the following pluggable functions.   Before going this route, please consider whether you can achieve what you want with “list types” or your own custom “list html style” and realise that you will be on your own with debugging your own code!

These functions must return valid html code:

  • amr_list_properties ($icals, $id, $class);
  • amr_list_events($components, $tid, $class, $show_views);

amr_list_events($components, $tid, $class, $show_views);

This function list the events. It calls the list types.

  • where $components is an array of events,
  • and where each event is an array of all the event properties that are available.
  • The events will have been “repeated” and “constrained” to the selection criteria.
  • The event properties may also be an array, so you should always test for that.  This is because an ics file may valid have some repeatable components.
  • $show-views is boolean and indicates whether the shortcode has requested that the links to ‘agenda’ or ‘calendar’ be displayed.

Example only:

array(9) {
[0]=>   array(20) {
["EventDate"]=>     object(DateTime)#868 (0) {     }
["EndDate"]=>     object(DateTime)#865 (0) {     }
["DURATION"]=>     array(1) {       ["days"]=>       int(1)     }
["ALLDAY"]=>     string(6) "allday"
["DESCRIPTION"]=>     array(1) etc.....
....

amr_list_properties ($icals, $id, $class);

lists the properties of the calendar such as name, calendar description, time zone etc

  • $id is some html id infomation (eg: if there are multiple calendars on thepage, this can be used to isolate one
  • $class is a class string similar to above
  • $icals is an array of events and calendar properties:

$icals example:

[0]
  [VEVENTS]......
  ["X-WR-TIMEZONE"]=>
    object(DateTimeZone)#1257 (0) {
    }
  ["X-WR-CALNAME"]=>
    string(10) "Local Test"
  ["X-WR-CALDESC"]=>
    string(20) "on the bleeding edge"
  ["icsurl"]=>
    string(32) "http://localhost/wpbeta?feed=ics"

Helpful functions

If you are writing your own listing functions,you should probably check the global variables and get your html to respond accordingly.

  • $amr_listtype, (1 to x)
  • $amr_liststyle,  (‘smallcalendar’,’largecalendar’,’html ‘etc)

You may wish to call some helpful functions.

amr_format_value ($content, $key, $event);

where key is one of the key values in the event array, $content is the base content or value of that propery, $ event is passed in case the default formatting routine needs access to other event information (eg: to generate a link etc).

This function will call other formatting functions if necessary, eg: amr_format_allday(), or amr_format_date().  See the ical_events_list_main.php file.   You could also call these individually.  (Or they could become pluggable at special request – go to the forum)
If you have timezones that you need to cope with and are  not using amr_format_value(), you will probably want to use

amr_format_date( $format, $date);

where

  • date is a datetime object.
  • format is a php format string

This will deal with the timezones for you, and convert the event date into the display timezone of the website or page.

How to configure a list type?

How To, Html

Most of the time, people have chosen to go with one of the default list types provided.  I had hoped to see some weird and wonderful stylings when I offered all this flexibility and styling options, and yes there have been some nice ones

However the possibilities are greater. Now that the amr-events plugin is gaining momentum, I am hoping to see some exciting designs! To aid this, there is a new page on how to configure the listtypes.

You can loop through whats available on your system by adding ?listtype=n to your event page. eg: http://test.icalevents.com/agenda/?listtype=12

Please see also the following categories:

Firefox, select multiples, checkboxes and gritted teeth

Html

Some of you may be wondering why the promised new event plugin is taking so long……

One reason is that some friends have needed some support (a whirlwind of mindblowing medical drama hitting the family) so plugin development had to take a back seat.

Another reason is firefox.

Being the thorough person that I am, I’m aiming that the new plugin will allow one to create whatever repeating event one wants to create.  For example: events that repeat every 5th x day of the month.  Some examples of all the wild and wonderful possibilities to allow and test for are here and here (scroll down to the rrule).  This means that a fairly sophisticated event entry form is required that can be simple, but can also expand to allow for the more interesting specifications.

HTML FORMS SELECT MULTIPLE in Firefox

At first this meant at least allowing “Select multiple” input and so I coded the select and validated it.  Then I added the multiple….

I could not get it to work in firefox.

At first, I drove myself batty thinking I had the wrong syntax, maybe the css was stuffing it up? maybe the php code was wrong etc, maybe the wordpress code was interfering.  Every time I made the validated SELECT a “multiple”, the dropdown arrow disappeared, making the input non functional.  A quick bit of googling showed that maybe there was a firefox problem there.  Other browers were handling it better.

Able to specify 5th x day of week
Able to specify 5th x day of week, Looking at this image - do we need to allow for the -5? ie: the first x day, but only if there are 5 of them in the month?

SELECT MULTIPLE or CHECKBOXES?

I decided I could not spend more time on it, and converted the areas that needed to allow multiple selection to checkboxes hidden initially using javascript – still only two clicks, with the plus that if those values are set, we can display them automatically on page load.  Possibly this is more user friendly, I said to myself, as some non-tech folks struggle with selecting multiple options in a dropdown, wheres most are used to “opening” a box and then they can see all the checkboxes that they can click on.

The last, fifth last and first days of every or selected months

HMTL FORMS RADIO buttons and CHECKBOX in Firefox

GroundHog Day!   So now I had some complicated radio and checkbox php and html happening.  Again it was driving me nuts,  random buttons were shown as on, when they should not have been.  I kept thinking it was a bug in my code (ok there were some to start, which is why it is godd to keep validating the code).  Then I found that firefox was happier if it had some MORE html bracketing the sets of checkboxes, so I gave it more.  Actually I think the nested checkboxes inside another checkbox fieldset were what broke it.  More fieldsets sorted it out..  Chrome, Safari and IE seemed OK either way.

I love the debugging add-ons in firefox (firebug and web developer) and have not been able to comfortably replicate those in other browers.  Normal I would test it out more to find a workaround, but I had already wasted hours and felt I needed to move forward with the developement.  If anyone has any info to shed on either of these and how to get around them, please let me know – post a comment below.

Ta!