Skip to main content

Events Calendar widget

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.

 

Filters/Calendar Content

Add Google Calendar

Add Attendance events from Registration Forms

Display

Style

Website Experience

FAQs

 

To get started:

  1. Click +Add Content
  2. Click Events Calendar

Filters/Calendar Content

On the Filters tab, you can decide what events should appear on your calendar.

  1. Enter a Calendar Title (if desired)

Add Google Calendar

If you want to include content from your Google Calendar inside your Sporty Calendar:

  1. Login to your Google Calendar
  2. Click the 3 dot menu next to your calendar name2022-12-14_13_11_11_2_.png
  3. Click Settings and Sharing
    2022-12-14_13_19_29.png
  4. 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).
    Screenshot_2022-12-14_132525.png      
  5. 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.

    Events Cal.jpg
  6. Paste the URL into the ical link to import field and select Event: External
    Screenshot_2022-12-14_133719_1_.png
  7. 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.

  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.Screenshot_2022-12-14_153101.png

You can choose to display both Google Calendar Events and Sporty Attendance events in the same calendar as demonstrated below:

Screenshot_2022-12-14_153137.png

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

Screenshot_2022-12-14_154505.png

Screenshot_2022-12-14_160450.png

Style

Here you can stylise the display of the event calendar to match 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.

Screenshot_2022-12-14_154445.png

Screenshot_2022-12-14_160846.png

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.

FAQs

  • 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.

 

Related articles