Calendars

We have a few ways to embed calendar information on the website depending on where the calendar is located (events.pcc.edu or Google).

PCC events calendar

The PCC event calendar uses a third-party application called LiveWhale. The calendar lets users view upcoming and past events, and submit new events. Administrators can approve and edit events.

Events calendars can be embedded into a page in a list format. Information on the page is updated automatically when the calendar changes.

PCC events calendar styling and responsive behavior
  • Styling: The events calendar is styled to look very similar to the main PCC website. The calendar view shows events by day or week, and lists the event title, date, time, location, and categories. Users can filter the calendar. The calendar detail views repeat the events’ basic information as well as list the details, contact information, join link, etc., and provide a link to add the event to your personal calendar.
  • Responsive behavior: The components stack vertically as needed. No information is hidden on smaller screens.
PCC events calendar development info
  • Stylesheet locations: in the LiveWhale system (see the Livewhale styles in Bitbucket), /_source/styles/components/_calendars.scss
  • Learn about LiveWhale theming in Spaces.
  • In WordPress, use pcc-events shortcode. The link to all events needs to be hardcoded.
  • In HTML, copy the widget code from LiveWhale.
PCC events calendar example

Loading events...

See more events ยป

Google calendar

Google calendars can be embedded into a page in a table format. Information on the page is updated automatically when the calendar changes.

Google calendar styling and responsive behavior
  • Styling: Embedded Google calendars look like regular tables and include an “Add to Google Calendar” icon that, when clicked, will add the information to your personal calendar.
  • Responsive behavior: Same as for tables.
Google calendar development info
  • Stylesheet location: /_source/styles/components/_calendars.scss
  • In WordPress, use the pcc-calendar shortcode. There are settings to limit the number of events and amount of details to be shown. There is also a simple list version, rather than the full table.
  • In HTML, see how to embed a calendar.
Google calendar example

c_duc3mfdl86ju835sk6elkk3ghk@group.calendar.google.com

Mini calendar

The mini calendar highlights important dates for the upcoming term. Dates are pulled in automatically from the academic calendar, and the mini calendar updates to the next term as soon as the academic calendar rolls over.

Mini calendar styling and responsive behavior
  • Styling: Mini calendars look like little calendars, and always show the same 4 items: class schedule available, credit registration begins, non-credit registration begins, and beginning of term.
  • Responsive behavior: No change.
Mini calendar development info
  • Stylesheet location: /_source/styles/components/_calendars.scss
  • In WordPress, use the pcc-calendar shortcode and use type="mini".
  • In HTML, all you need to generate a mini calendar is <div class="mini-calendar"></div>. Everything is written onto the page using JavaScript based on data in the academic calendar.
Mini calendar example