Use the Events Calendar widget to display events from your Google Calendar or Sporty Event Registration Form on your Sporty site.
Note: This calendar is optimised for mobile.
This article includes:
You first must add the Event Calendar Widget to your Sporty site. To do this, navigate to where on your site you want to add the calendar, then click + ADD CONTENT. Select Events Calendar from the options.
Settings
Filters
On the Filters tab, decide what events should appear on your calendar. Enter a Calendar Title (if desired).
Adding a Google Calendar
To display content from your Google Calendar within the widget, follow the below instructions.
1. Login to your Google Calendar.
2. Click the 3 dots (Ellipsis) next to the calendar name that you want to bring across into Sporty to open the calendar options.
3. Click Settings and sharing.
4. Scroll down to the Integrate Calendar section and copy the 'Public address in iCal format'. You may need to select the 'Secret address in iCal' format depending on your Calendar publication settings.
5. Select + ADD CONTENT button on the page on the website you would like the calendar displayed. Add the Events Calendar from the widget menu.
6. Paste the copied URL into the iCal link to import field and select Event: 'External'.
Note: If you are only including the Google Calendar in this widget, we recommend you check Hide Filter beside the Event: 'External' field.
Adding Attendance Events (from registration forms)
Registration forms that capture Attendance are required to generate attendance events on the Calendar. To create an attendance event on a registration form, view this article.
1. Select the Sport associated with the registration form that has an Attendance field on it.
2. Select the Events you want to include on the calendar
3. Select Hide filter if you do not want to allow website visitors to filter the calendar to specific events.
Adding Attendance Events and a Google Calendar
You can choose to display both Google Calendar events and Sporty Attendance events in the same calendar by selecting both 'External' and the 'Attendance Event' from the Event drop-down.
Display
Here you can choose the desired default format for website visitors to view your event calendar.
1. Select either List or Calendar view.
2. By default, the widget will load all content, and extend in height in the list view to do so. You can specify a maximum height for the widget to display if you prefer. Selecting this option will introduce a scroll bar.
Example: List view
Example: Monthly view
Style
Here you can stylise the display of the event calendar to match the style of your website.
1. Choose a background colour and text colour to display the calendar header and filters in.
2. Choose a font, text colour, background colour and colour transparency setting for the display of the events on the calendar.
Website Experience
People viewing the Events Calendar on your website will be able to interact with the event based on whether the event came from a Google calendar or a Sporty Attendance Event.
People can:
- Navigate across months,
- Filter the displayed events list to only those events they are interested in,
- Change the display of the calendar to/from Calendar to List view.
When clicking into a Sporty Attendance Event, your website visitors will be able to click the Register option to complete the registration form related to the attendance event.
When clicking to view a Google Calendar Event, your website visitors will be able to view the event details, location, description. They will also be able to view any attachments or links you have added to the event.
The Google calendar integration will resync every 30 minutes. You can manually trigger a resync by clicking the Settings cog on your widget, then clicking the sync arrows next to the iCal link to import field.