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 17
Closed
Monday, May 18
8:30 a.m. – 5:30 p.m.
Tuesday, May 19
8 a.m. – 5 p.m.
Wednesday, May 20
8 a.m. – 5 p.m.
Thursday, May 21
8 a.m. – 5 p.m.
Friday, May 22
8 a.m. – 1:45 p.m.
Saturday, May 23
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 17
May 17
Closed
Monday
May 18
May 18
8:30 a.m. – 5:30 p.m.
Tuesday
May 19
May 19
8 a.m. – 5 p.m.
Wednesday
May 20
May 20
8 a.m. – 5 p.m.
Thursday
May 21
May 21
8 a.m. – 5 p.m.
Friday
May 22
May 22
8 a.m. – 1:45 p.m.
Saturday
May 23
May 23
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.