The Events Calendar widget lets you bring content from your Google Calendar or Sporty event forms to display in a mobile optimised calendar view on your website.
To get started:
- Click +Add Content
- Click Events Calendar
On the Filters tab, you can decide what events should appear on your calendar.
- Enter a Calendar Title (if desired)
Add Google Calendar
If you want to include content from your Google Calendar inside your Sporty Calendar:
- Login to your Google Calendar
- Click the 3 dot menu next to your calendar name
- Click Settings and Sharing
- Scroll down to Integrate Calendar and click to Copy the public or secret iCal address of the Calendar (the option you select is based on your Calendar publication settings).
- Select the Add Content button on the page on the website you would like this displayed on. Add the Events Calendar from the widget menu.
- Paste the URL into the ical link to import field and select Event: External
- If you are only including the Google Calendar in this widget, we recommend you check Hide Filter.
Add 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.
- Select the Sport associated with the registration form that has an Attendance field on it
- Select the Events you want to include on the calendar
- Select Hide filter if you do not want to allow website visitors to filter the calendar to specific events.
You can choose to display both Google Calendar Events and Sporty Attendance events in the same calendar as demonstrated below:
Here you can choose the desired default format for website visitors to view your event calendar.
- Select either List or Calendar view.
- 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
Here you can stylise the display of the event calendar to match your website.
- Choose a background colour and text colour to display the calendar header and filters in.
- Choose a font, text colour, background colour and colour transparency setting for the display of the events on the calendar.
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.
- 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 30minutes. 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.