Skip to main content

Integrate the court calendar on your website

Do you want to integrate the court calendar on your website? Here we show you how you can customize the iFrame code

Written by Lukas Grenstad

Start by retrieving the code from the admin dashboard under Activities > Calendar > Share calendar > Embed 📆 You will then receive a code that looks like the one below. You can choose whether it should show all courts or only specific courts.

<iframe width="100%" height="800" src="https://calendar.hoopit.io/public-calendar/530bf175-4e86-46ca-b52e-24cf3b3b223b" scrolling="yes"></iframe>

Show/hide court selector

Hide the court selector by adding &venueSelectorEnabled=false

&venueSelectorEnabled=false

Show/hide mini calendar

Hide the calendar in the top left corner with &sideCalendarEnabled=false

&sideCalendarEnabled=false

Show/hide group selector

Hide the group selector with &groupSelectorEnabled=false

&groupSelectorEnabled=false

Change default calendar view

You can change the default view of the calendar with &defaultViewType= [view]

Monthly view = [dayGridMonth]
Weekly view = [timeGridWeek]
Daily view = [timeGridDay]
Monthly agenda view = [listMonth]

Example:

<iframe width="100%" height="800" src="https://calendar.hoopit.io/public-calendar/530bf175-4e86-46ca-b52e-24cf3b3b223b?venueSelectorEnabled=false&sideCalendarEnabled=false&groupSelectorEnabled=false&defaultViewType=listMonth" scrolling="yes"></iframe>
Did this answer your question?