Category Archives: Widget

Notes as they relate to displaying events and calendars as widgets

Event widgets working together

A two column events widget (box and list together)?

A while back someone took the time to mock up the above image as a feature request, and I recently realised that it is now possible to do this as we have the small calendar widget now. Of course the exact placing will depend on your theme – it’s sidebars and the css. If you do not have a wide sidebar or a 2 column theme, the sections will appear below each other.

Two widgets working together

The two widgets will interact with each other by passing parameters in the links.

  • You determine the starting view of the list (number of days and events)
  • Click on a day and the list widget will display the events for that day (within whatever limit you have imposed above)
  • Click on a month and not only will the box change, but the list will also display the events for that month

Event summaries, descriptions and the widgets

Calendar widget and day event titles

The event calendar box widget works the same way as the standard wp-calendar post widget, except that

  • it does events not posts.
  • it will link to a calendar page not a post archive (because of the need to handle recurring events differently)

The event calendar widget will display for each day, a hyperlink title (displays on hover). This title is a comma separated concatenation of the  titles of the events for that day.  It is not configurable.

List Widget and Descriptions

The list widget display is highly configurable.  If your event descriptions are short, you may want them to display in the widget, but if they are long, maybe the title is enough.

How to control display event descriptions

  • Have them display only if the event summary / title is “hovered” over ? or
  • Display below with expanding and contracting css ?
  • or just display normally ?

Three aspects can influence the display:

  1. the widget settings
  2. the css (yours or the default css provided)
  3. the list type settings

1. The widget settings

Widget settings for description hover

In the upcoming event list widget settings, one can switch off the ‘hover’ of the description in the link of the summary.  Please ensure that you are on the latest version (3.1 or amr-events or 1.0 of amr-ical-events-list) as this feature was briefly lost when the small calendar was introduced.


2. The css

  • the default css will hide the description field (if selected for display in the listtype) and only show the description on hover over the event.
  • to show the description permanently, you need to either switch off the default css – your theme’s css will apply, or customise it.  See ical events list general settings.
Css customisation

3. The list type

The default list type for the list widget is number 4. (you can of course create an entirely custom one).  By default the description is NOT shown (ie it has a 0 in the column field).  If you want the description or any other field to show IF it exists in your ics file or wordpress event, then you need to assign it to a column. For the widget ‘1’ is a good option.

Widget list type configuration

How to make the event widget look like….

I had a request for advice on how to configure or add css to make the widget look like this.

  • display the calendar list items with the date in bold,
  • the summary as a bullet,
  • then the location on a new line (no bullet),
  • followed by the start and end times on a new line (no bullet).
Event Widget Example

Easiest way is with the latest version 3.0.2 (soon to be uploaded) and the default settings.

Steps:

  • For the  listtype you are using for the widget (maybe no 4?), set the new option: “List HTML style” to “lists for rows”
  • tweak the day and time formats to suit
  • click on the grouping by “day” only
  • now get the fields in the order you want. Set column to 0 to hide and column to 1 for the fields you want see.  Hide the event date (it will be shown in the grouping)
  • use the order column to define the sequence of the event properties
  • add a <br /> to the “before” input field for all fields that you wish to start on a new line.

Upcoming Events Widget

Clean, simple, cached widget that allows multiple calendars to be specified for one batch of “upcoming events”. Mix in the eccentric holidays, public holidays from google calendars, or whatever takes your fancy, with your calendar.

The widget requires the ical-events-list plugin.

The current widget version is included in the plugin.

Showcase: Some examples “in the wild”:

showcase
showcase4

Widget in Classic Theme
Widget in Classic Theme

showcase3