Calendar Events

Shared Partial Name:

wvu-calendar-events

When to Use

Use when you want to display upcoming events and link users to view a full calendar.

Example: Standard Calendar Events Collection

Calendar Events Headline

Subhead goes here.

Put additional info or links here.

View Code

Copy

Content Model and Styling Guidelines

The following guidelines will help ensure your content and styling follow our design principles, and ensures consistency and unity across your pages as well as other WVU-branded websites.

Content-Specific Guidelines

Content	Max Characters	Description
Header*	56	A headline introducing the collection.
Subhead	56	Additional info about the collection.
Date*	N/A	The month and day of each event.
Item Headers*	56	The title of each event.
Location*	N/A	The location of each event.
Item Blurbs*	255	A brief description of each event.
Item Call to Actions*	16	A button to view more info about each event.
Postscript	1-2 Sentences	Include a link to an external page with additional info or a full calendar of events.

* Indicates required content.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared calendar-events partial in the Design System CleanSlate. CleanSlate developers can use this component by adding a shared partial to a template. Below are the available configuration options for this component.

General Component Parameters

The following parameters can be used when including any shared partial.

Name	Options	Description
`editModeOnly`	`true`	If set to true, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
`main`	`true`	If set to true, a `<main></main>` element will apply to the component.
`scope`	`page site`	If set to site, content in the editable regions of the component will apply sitewide to any component with the same name and instance number that is also set to `scope: "site"`.

Code Example

{% render "components/wvu-calendar-events"  %}

PRO TIP: Options that contain integers (1, 2, 3) or boolean values (true, false) don’t need to be wrapped in quotes e.g. limit: 1 or main: true. Strings should be wrapped in quotes e.g. scope: "site".

Setup

From the CleanSlate Pages dashboard, assign the Super Template to a page. In the page properties, navigate to the Slots tab. Assign a calendar-events partial to one of the slots.

General Component Configuration

The following options can applied to any component in a slot.

Name	Options	Description
Edit Mode Only	`checked unchecked`	If checked, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
Is Main	`checked unchecked`	If checked, a `<main></main>` element will apply to the component.
Sitewide	`checked unchecked`	If checked, content in the editable regions of the component will apply sitewide to any other component with the same name and instance number that is also set to “Sitewide”.