Component overview
- Hours components can be used on all page types. The current version cannot be used in Panels.
- Each published Hours component is made of three individual component types:
- Hours: This is the primary component piece placed on a page. It sets the title, description, and width option (in columns) for the component's appearance. It includes one or more Schedule components, and can include multiple optional "Override" entries.
- Schedule: This component establishes a regular set of weekly hours (Sunday through Saturday) and is made of multiple Hours Entry components. It includes a start and end date for the period of time the schedule should be active. If no Schedule component is "active" for a given Hours component, it will display "Current schedule information is unavailable. Please contact our office for assistance." The Schedule component can only be used inside of an Hours component.
- Hours Entry: This component stores a day (Sunday through Saturday) and applicable hours for that day. Each Schedule component will be made up of seven Hours Entry components.
- This component does not have a WSYIWYG. The title and description fields are text-only, no links or formatting allowed. Date and time fields use a date/time picker.
- Hours components have two layout options:
- Vertical: This is the default layout. It will display the active schedule vertically in a 4 column layout {{can be increased}}.
- Horizontal: This layout displays the schedule from left to right, taking up the full width of the window (12 column). On {{ screen breakpoint }}, the layout changes to vertical for readability.
- Hours components with a vertical layout can be used next to content blocks.
- Anchor links can be configured. If you want to set up a named anchor link directly to the component, add a one-word anchor name to the "HTML ID" field.
- The Hours title field uses H-tag options: Make sure you select the appropriate tag based on the Panel's position on your page.
HOURS: UNIT NAME - Purpose
- Example: HOURS: COUNSELING - Drop-In Hours
HRSCHED: UNIT NAME - Purpose
- Example: HRSCHED: COUNSELING - Spring 2024
HRENT: UNIT NAME - Purpose
- Example: HRENT: Counseling - Monday
- Example: HRENT: Counseling - Override - Commencement
Example Hours components
Four column layout
This is the default layout for an hours component. It takes up 4 columns of the page width and lists the days and times vertically.
Sunday, Dec. 22
Closed
Monday, Dec. 23
8:30 a.m. – 5:30 p.m.
Tuesday, Dec. 24
8 a.m. – 5 p.m.
Wednesday, Dec. 25
Closed
Thursday, Dec. 26
8 a.m. – 5 p.m.
Friday, Dec. 27
8 a.m. – 1:45 p.m.
Saturday, Dec. 28
Closed
Example block
This section is a content block sized at eight columns in width, and takes up the remaining space on a row with a four column Hours component preceeding it. The Foundation grid system is based on 12 columns, so for best results everything in a row should add up to 12.
Twelve column layout
This is the horizontal layout option. It takes up 12 columns of the page, and uses the same schedule data as the 4 column version above.
Sunday
Dec 22
Dec 22
Closed
Monday
Dec 23
Dec 23
8:30 a.m. – 5:30 p.m.
Tuesday
Dec 24
Dec 24
8 a.m. – 5 p.m.
Wednesday
Dec 25
Dec 25
Closed
Thursday
Dec 26
Dec 26
8 a.m. – 5 p.m.
Friday
Dec 27
Dec 27
8 a.m. – 1:45 p.m.
Saturday
Dec 28
Dec 28
Closed
Building hours
Spring semester hours effective Monday, Jan. 22, 2024.
Current schedule information is unavailable. Please contact our office for assistance.
Example Vendor
Current schedule information is unavailable. Please contact our office for assistance.
Example Vendor
Current schedule information is unavailable. Please contact our office for assistance.
Example Vendor
Current schedule information is unavailable. Please contact our office for assistance.