How to style or customise the calendar boxes large or small, eg: use excerpts

Css, How To, ,

Change the content of the calendar boxes

Change the content definition yourself.  The large calendar uses list type 9 setup as a default.  This works with the default css provided.  You can modify that or create your own list type and css..

Own list type for calendar

To make the calendar use your list type, add a parameter “calendar=n” to the shortcode, where “n” is your listtype number, so that the plugin knows which listtype to use.

What content goes where?

For the large calendar, the listtype ‘columns’ are not really columns – more like ‘areas’ in the event box.  In the default setup,

  • Column 1 is the day box,
  • column 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 to the calendar.

  • 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

Example: To show the excerpt instead of the description in the hover box

  • Go to the settings for the calendar list type
  • Open up the “Specify fields to show > Descriptive ” section.
  • Change the description column to 0
  • Change the excerpt column to 2, add any necessary before/after html to make it work with the css (eg: to make it hover or not)
  • Update

Note: What actually shows depends (just like post excerpts) on your excerpts setup:

  • manual excerpts only ? (wp default). If there are no manually entered excerpts, nothing will display
  • use theme functions or a plugin to create excerpts if there are none
Configuration to show excerpt instead of description
Configuration to show excerpt instead of description
Show excerpt in the hover of the calendar
Show excerpt in the hover of the calendar

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 being the 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.