Tag Archives: selectors

Styling of Ical events

One of the features of this plugin is that it offers many css selectors so you can add your own unique styling to events, properties of events, or groups of events.  
The browsers web developer tools like ‘inspect element’ are very handy for seeing what html and css selectors are available and playing with some css. [Firefox, Safari, Chrome]

Example: Styling the summary of a cancelled event with strikethrough

screenshot
Example of the many different css selectors based on event characteristics

Possible methods

  • Category – A css class has been added to the event row for each ical categories – see version 2.9.2. However not all ical generators allow one to specify the category field (eg: google does not).   A plugin that I am working on to add events in wp, will allow one to allocate categories and tags to an event.
  • Location only if a taxonomy, or tag: Location is a text field in the ical spec.  The ical event listing plugin offers a googlemap link using the location fields (or the geo field).  For this reasonably decent addresses are required.  Css class selectors are not allowed to start with numeric values (as many addresses do).  So….If one attempted to offer styling by location, it would possibly be along these lines:
    • optional – only if specified in the settings?
    • possibly only the first alpha numeric string with spaces (and other punctuation chars) removed before a comma?
      • PM’s residence, 10 Downing Street, London => PMsresidence
      • 10 Downing Street, London => DowningStreet
      • Sydney Opera House, Macquarie Street => SydneyOperaHouse
      • Apt 56B, Whitehaven Mansions, Sandhurst Sq, London => Apt56B
      • Conference Room – F123, Bldg. 002 => ConferenceRoomF123Bldg002

Css selectors:

Style individual events

  • history (the end date and time has passed)
  • future (the start date and time is in the future)
  • inprogress (the start date and time has passed, but not the end date and time)
  • today (the event is in progress today)
  • allday (the event is an all day event)
  • untimed (the component is untimed – not be an event, may be a NOTE)
  • multiday (the event goes over many days , start and end date are not the same)
  • recur (the event is a recurring or repeating event)
  • alt (so that alternating events can be styled differently – zebra styling!)
  • status (the value in the status field for that event will be echoed as a class.  For example: CONFIRMED)
  • type (the type of ical calendar component – vevent | vtodo | vjournal | vfreebusy | vtimezone | valarm, will be echoed as a class )
  • calx (Calendars can be combined, this value will be cal0 for events from the first calendar, cal2 for events from the second etc)
  • categoryIf there are categories in the ics file, or allocated to an event post, they will be echoed as classes in the event html element by name or term id
  • tags, taxonomies – as per category

Style a group of events

The plugin also allows one to “group” events in a variety of ways:weekly, monthly, yearly or by seasons.  The group value will be echoed as a class.  Thus one could style a group of events by:

  • week number
  • sign of the zodiac
  • season
  • month, year, quarter

Style the properties of the event

Each property (eg; summary, start date, location etc) is assigned a corresponding class, so that one can style these uniquely – see the showcase for some examples.  See the settings page or the ical spec for the list of properties.