Customise Large calendar, simplify

Css, How To

A response to a request on the forum:

Aim: to mimic the google calendar view
Live Result Example: http://www.icscalendar.com/box-calendars/simple-large-calendar/

A simple large calendar
A simple large calendar

Characteristics:

  • Start time and title, no hover box, event detail chopped off to one line

Changes to make

  • The listtype
  • The shortcode parameters (optional)
  • The css (maybe – depends on your theme)

The listtype

Configure a large calendar list type or simple copy/paste from list type the listtype text at the bottom of this post.).  To do it yourself, see detailed instructions for:

  • Update fields to show so that only Starttime and Summary have column = 1, all else =0.
    Update StartTime order = 1, Summary order = 2
    Add a ‘space’ either “ ” (non breaking space) or “ ” a normal space.
  • If you want am/pm time, open dateTime formats and change time to
    “g:ia”.  See http://php.net/manual/en/function.date.php for more options
  • If you anticipate a very large number of events per month, go to the “Define maximums” and enter a max number of events approx double what you expect.

Click ‘Update’ to Save your listtype.

List type screen

Shortcode parameters

In your largecalendar page, enter the shortcode, using your list type number.  Optional: Decide whether to you want a dropdown box or not. See parameters available.

[largecalendar listtype=13 show_month_nav=1]

The css

Full event title displayed

The default css will allow the full event title to be displayed. If you want to trim it so the event stays on one line, you need to add some custom css.

Trimmed events details - overflow hidden

Either use the custom css file provided (download, edit, ftp upload and then choose it  from the plugin settings. For instructions, see https://icalevents.com/3591-custom-css-for-event-lists/

OR (easy option)

If  editing css, file structures and ftp is not your area of expertise, then
use the wordpress.com custom css plugin provided by automattic
and add something like:

#events_wrap .largecalendar tbody td div.event {
overflow:hidden;
white-space:nowrap;
font-size:10px; /* make text smaller - depends on your theme */
}
Wordpress.com custom css editor screen

Appendix:

Option: Copy and Paste ALL of this text string into a list type import field in your “manage listtypes” screen: