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, May 11
Closed
Monday, May 12
8:30 a.m. – 5:30 p.m.
Tuesday, May 13
8 a.m. – 5 p.m.
Wednesday, May 14
8 a.m. – 5 p.m.
Thursday, May 15
8 a.m. – 5 p.m.
Friday, May 16
8 a.m. – 1:45 p.m.
Saturday, May 17
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
May 11
May 11
Closed
Monday
May 12
May 12
8:30 a.m. – 5:30 p.m.
Tuesday
May 13
May 13
8 a.m. – 5 p.m.
Wednesday
May 14
May 14
8 a.m. – 5 p.m.
Thursday
May 15
May 15
8 a.m. – 5 p.m.
Friday
May 16
May 16
8 a.m. – 1:45 p.m.
Saturday
May 17
May 17
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.