Overview
The Schedule Page provides users with a chronological view of upcoming and past events in a vertical format. Accessible from multiple navigation points, it features interactive filters and a calendar to help users find events by date or team. Event cards dynamically update to reflect real-time states, delivering a clear and engaging schedule experience.
CMS Configuration
Accessing Schedule Page Settings
Navigate to App CMS > Template > Template Builder.
Select the Schedule Page template for configuration.
Configurable Elements
Page Background Color
Page Title
Label text
Font style and color
Calendar Module
Outer border styling
Color customization for:
Active/selected dates
Inactive (disabled/greyed-out) dates
Team / Tournament / Leagues Filter Dropdown
Font styling and color for dropdown list items
Styling for the selected team placeholder label
Single-select dropdown with “RESET” option to clear selection
Schedule Cards
Header
Font styles and colors per event state (e.g. upcoming, live, post)
Background colors vary by event state
Main Body
Font and color for event titles
Event state badges styling
Footer
Font styles and colors for labels and broadcaster information
General Layout
Vertical list of schedule cards sorted chronologically
Past events appear in a horizontal carousel separately below upcoming events
End User Experience
Entry Points
Access via the Schedule option on the homepage.
Access via footer navigation.
Access via side menu navigation.
Schedule Page Layout
Page Title displayed at the top-left corner.
Calendar Module
Shows current month with event dates highlighted.
Dates without events are greyed out and disabled (no interaction).
Tapping a date filters schedule cards to show only that day’s events.
Team / Tournament / League Filter Dropdown
Allows users to filter events by selecting a single team.
Selecting a team updates the vertical event list to show related events.
A “RESET” link clears the filter and returns to full schedule view.
Vertical Schedule Cards
Each card shows:
Date and time of the event (displayed in user’s local timezone) on the left of the header.
Event state badge on the right of the header, updated dynamically.
Event title allowing up to two lines.
Footer with “Where to Watch” broadcaster names (plain text, comma-separated, up to two lines).
Upcoming events are listed chronologically at the top.
Below the upcoming events, past events appear in a horizontal scrollable carousel.
Interactions
Clicking/tapping any schedule card navigates to the detailed event page.
Filters and calendar selections update results instantly without page reload.
Best Practices
Ensure calendar dates and event times reflect the user’s local timezone.
Keep event and broadcaster names concise but informative.