Skip to main content

Widgets: Events Calendar

Using the Events Calendar Widget in CourtReserve

Written by Mari Bern
Updated over 2 months ago

INTRODUCTION

Feature Summary: The Events Calendar widget is an embeddable tool in CourtReserve that allows clubs to display a live, interactive calendar of upcoming events directly on their website or other platforms, such as a front desk smart TV. This widget gives players and visitors a convenient way to browse events, view schedules, and register.

Note: Widgets are designed to run in a web browser. For example, system users can copy and paste a widget link onto their website or display it on a front desk smart TV. If a widget link is tapped inside the CourtReserve mobile app or branded mobile app, it will open in the device’s default browser, where players will interact with the widget.

Use Cases:

  • Display the club’s full event calendar online for easy browsing.

  • Allow players to register for classes, clinics, and social events directly from the website.

  • Embed the calendar on front desk monitors to highlight daily or weekly events for walk-ins and visitors.

  • Provide a public-facing calendar for prospective members to view club offerings before joining.

Note: Widgets can be configured with multiple filters to control which events are displayed. If you're unsure why a specific event isn't appearing, verify that the "Public Embed Codes/Widget" option is enabled on the event’s Event Setup tab.


For a high-level overview of how widgets work in CourtReserve, start with this article.


NAVIGATION

Log in to the admin dashboard.

  1. Click SETTINGS on the side menu.

  2. Scroll down to the WIDGET row heading.

  3. Select Events Calendar.


Create an Events Calendar Widget

Click the green Create Widget button to get started.

  • Widget Type: Defaults to Events Calendar.

  • Name: The internal name for the widget. Helps identify and organize your widgets inside the admin portal.

  • Filter Calendar by Categories: Allows you to filter the calendar display by event categories, showing only selected types of events.

  • Hide Title Bar: Option to remove the widget’s title bar entirely from the display.

  • Title Bar Label: The text that will display on the title bar.

  • Main Background Color: Sets the background color for the entire widget display area.

  • Title Bar Background Color: Sets the background color for the widget’s title bar.

  • Title Bar Font Color: Sets the font color of the text displayed in the title bar.

  • Allow Calendar Filtering: If enabled, users can select to apply filters within the widget. In this widget, the filter is Event Categories.

  • Show SignUp Button: Displays the registration or sign-up buttons for eligible events or bookings directly within the widget.

  • Show Daily Calendar: Enables a daily calendar view option for the end user.

  • Show Weekly Calendar: Enables a weekly calendar view option for the end user.

  • Show Monthly Calendar: Enables a monthly calendar view option for the end user.

  • Show Agenda: Enables a list-style (agenda) view option.

  • Default Calendar: Sets which calendar view (Daily, Weekly, Monthly, or Agenda) should load first when users open the widget.

  • Interval: Defines the time slot intervals for displaying availability or events (e.g. 30-minute increments).

  • Custom CSS: Optional field where custom CSS styling can be applied to further customize the widget’s appearance. Learn more here.

  • Test Your Widget (Link): Provides a direct link to preview and test how the widget will display live.

  • Widget Code: Auto-generates the embeddable code that can be copied and inserted into your website to activate the widget.

Copy Widget Code (Button): Quick button to copy the full embed code to your clipboard for easy website placement.


USER PERSPECTIVE ​​

In the example below of the Events Calendar widget, the default view is set to Weekly, with all calendar views (Daily, Weekly, Monthly, and Agenda) accessible to the player, along with Filtering and Sign Up options enabled. The example is one view split up into two screen shots.


Related Videos

Did this answer your question?