Calendars

We have a few ways to embed calendar information on the website, but they’re used a bit sparingly.

Google calendar

Google calendars can be embedded into a page in a table format. Information is updated automatically.

Google calendar development info
  • Stylesheet location: /source-v6/styles/components/_tables.scss
  • Documentation about how and when to embed a calendar, and guidelines for different display options are on Spaces.
  • There isn’t currently a way to add calendars in the WordPress editor without accessing the source code
Google calendar styling

Embedded Google calendars look like regular tables, and include an Add to Google Calendar icon that will add the information to your personal calendar.

Responsive info

Same as for tables.

Google calendar example

There is an example of a live Google calendar on the athletics pages.

Google calendar exmple

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 development info
  • Stylesheet location: /source-v6/styles/components/_calendars.scss
  • There isn’t currently a way to add calendars in the WordPress editor without accessing the source code
  • 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 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 info

No change.

Mini calendar example

There is an example of a live mini calendar on the PCC calendars page.

Mini calendar example