Game Schedule Module Pro - Setup Guide

Installation

After installing the Game Schedule Pro module from the HubSpot Marketplace, it will appear in your page editor's module panel. Search for "Game Schedule" and drag it onto any page.

Adding Games

1. Click the module on your page to open the editor panel
2. Click + Add under the Games section
3. Fill in the game details:
   • Team - Your team name (e.g. Boys U10)
   • Opponent - The opposing team
   • Date - Select the game date from the date picker
   • Kickoff time - Enter the start time (e.g. 9:00 AM)
   • Location - Where the game is being played (optional)
   • Home / Away - Select whether your team is home or away
   • Result - Leave blank for upcoming games. After the game, enter the score (e.g. W 3-1, L 0-2, D 1-1)
4. Repeat for each game on your schedule
5. Drag games to reorder them if needed

How the Schedule Works

The module automatically splits games into two views:

• Upcoming - Shows games with future dates and no result entered
• Results - Shows games with a result entered or dates in the past

Visitors toggle between views using the tabs at the top of the schedule.

Setting Your Brand Color

Under the module settings, use the Brand color picker to set your club's accent color. This applies to the day-of-week labels, active tab indicator, and hover states.

Customizing the Heading

Change the Heading field to whatever fits your page. Common options: "Game Schedule," "Fixtures," "Match Schedule," or "Season Calendar."

Pro Features

The following features are available in Game Schedule Pro only.

Team Filtering

When you have multiple teams in one schedule, Pro adds filter buttons so visitors can view games for a specific team. Toggle Show team filter buttons in the module settings.

Editor-Side Team Filter

Use the Filter to team field to lock the module to a specific team's games. This is useful when placing the schedule on individual team pages. Enter the exact team name (e.g. "Boys U10") and only that team's games will display. This filter is set in the editor and not visible to site visitors.

Pagination

Control how many games display at once with the Games to show initially setting. When there are more games than the limit, a Load More button appears. Each click reveals the next batch of the same size.

Dark Mode

Switch between light and dark backgrounds using the Theme mode dropdown. Dark mode automatically adjusts all text, borders, badges, and backgrounds for contrast. You can further customize the background color in the Colors section.

Full Color Control

Pro gives you individual color pickers for:

• Accent color
• Heading color
• Text color
• Muted text color
• Border color
• Background color
• Win, Loss, and Draw result colors

Season / Competition Label

Add a Season / Competition label (e.g. "Spring 2026" or "League Cup") that displays above the heading. Useful for distinguishing between seasons or tournaments.

Default View

Choose whether the schedule opens on Upcoming or Results by default using the Default view dropdown.

Custom Empty State

Change the message that appears when no games match the current filters. Default is "No games to show."

Max Width

Set a custom Max width in pixels to control how wide the schedule stretches on the page. Default is 960px.

Tips

• Start result entries with W, L, or D to activate color-coded result badges (Pro only). For example: "W 3-1" shows in green, "L 0-2" in red, "D 1-1" in gray.
• Games without a date show as "TBD" and default to the Upcoming view.
• The module is fully responsive. On mobile, the layout stacks vertically for easy reading.
• You can place the module on any page type including website pages, landing pages, and blog listings.