Little boxes, big boxes, very customisable, not made of ticky-tacky

amr events, How To

A calendar box format is now available as well as the agenda list format.  Both amr-events and the free plugin amr-ical-events-list will be able to choose the calendar format. A calendar widget is also be available.   The large calendar is highly customisable.

Screenshots show default css as at 2010 and as influenced by 2010 type themes.    Current default styling with a recent wordpress theme is visible on the test site.

Large calendar example
Small calendar in page
Small calendar in page, note today styling
Calendar widget, designed to be consistent with the wp-calendar (post calendar) styling

Features:

  • picks up the start of week from your wordpress settings, so you can start with any day of the week, saturday, sunday or monday!
  • optional “view” tabs – agenda, or calendar (others planned), or you can also create your own using different listypes, with links to the calendar page and the listtype in a link query string EG:  http://yoursite.com/yourcalpage&listtype=2
  • provides class selectors to enable unique styling of today, the weekend days, the non-month boxes, the last box (especially useful to avoid the hover box hovering off the page) etc
  • default css aimed at providing a reasonable default while letting your theme work too.
  • the small calendar widget is based on the wordpress posts wp-calendar code, so it’s operation and styling is very similar.   It is hoped that it will then work well with your theme, if your theme has css for the standard wp post calendar.

Usage:

  1. Create a page and enter a shortcode:
    • [ largecalendar ] wordpress events and optionally external urls in box calendar
    • [ smallcalendar ]  (similar to widget) in small box calendar
    • [ events ] – wordpress events and optionally external urls in a list
    • [ ical ] – external urls only in a list
  2. Create events in the future, (or for free plugin, add at least one external ics url in the shortcode parameters.)
  3. Optional customise the listtype settings to define which fields appear in which “columns”.

Optional shortcode parameters:

All the usual event listing shortcode parameters can  be used as well as the following new ones:

  • show_views=1 (to switch on (default) alternate views menu, use 0 to switch off)
  • headings=0 (to switch off column headings while leaving configuration in place.  Default is 1 (on))
  • calendar_properties=0 (to switch off the calendar properties heading, while leaving the config in place should you change your mind)
  • agenda=n (the listtype to use for the agenda view option – default = 1)
  • calendar=n (the listtype to use for the calendar view option – default = 9)

Customisation possibilities:

Change the content definition yourself- the large calendar leverages off the existing “listtype” configuration.  There is a default list type 9 setup as a default, which will work with the default css provided.   For the large calendar, the listtype columns are not really columns.  Col 1 is the day box, col 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.

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.

Configuration example – columns say what goes where
Column 1 in the day box, column 2 in the hover

Styling

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