Zone Occupancy Calendar in Client Portal

Introduction

The Club Zone Occupancy Calendar is the solution made for clubs using Facility Booking on the Client Portal. It allows for presenting the current state of occupancy of a given Zone, meaning how many slots are free at a given time and date.

The Zone Occupancy Calendar presents the data in tiles grouped by day and hour intervals. It also displays the number of available slots for a given Zone.

This article will help you to get to know the Zone Occupancy Calendar better and learn its available parameters. You will also learn how to embed the calendar on your website.
This article will be helpful to PG Champion, Club Manager and Club Owner. It is recommended to the Clubs which use Facility Booking and the Client Portal.

Before you start

You have to use Facility Booking and Client Portal.

Make sure you are familiar with the Zone Availability Schedule for the facility bookings module. More information about the zone availability schedule can be found here.

We recommend the embedding part be done by the IT department or developers.

Permissions

To access the Zone Occupancy Calendar, you need the system permission set up on your employee role, this can be done in PGM->Clubs->System permissions.

The settings you need to have ticked for this are as follows:

System administrator
- Club zones
  - SystemManClubZonesOccupancyCalendar
    - SystemManClubZonesOccupancyCalendarView

Instruction

To access the zone occupancy calendar, go to PGM -> Classes -> Zone occupancy calendars

This will display a list of all the calendar definitions for the club zones you want to present occupancy for.

Facility Booking - Zone occupancy calendar definitions

Create new calendar definition - To create a new calendar definition, press Create new calendar definition. More information can be found below.

Link / Embed on a website - selecting one of these options will provide the information required to show the zone availability publicly.

Link - Selecting this will display the zone calendar availability in a new window. You can use this URL link to add to your website.
Embed on a website - Selecting this will provide a drop down box with the script data to use to add to your website. More information can be found below.

Additional options - selecting the 3 dots will provide additional options.

Edit - Selecting this will allow you to edit the current zone calendar definition.
Delete - Selecting this will delete the current zone calendar definition.

Create new calendar definition

After pressing create new calendar definition, the following screen will display.

Name - Choose a name for this club zone occupancy calendar

Choose Club - Select which club this occupancy calendar relates to using the drop down options

Club Zones - Select which club zone this occupancy calendar relates to using the drop down options

Days per page - Select the number of days presented on a single page of the calendar (Min 5, max 7)

Time Interval - Select the time interval in minutes between the next calendar tiles (Min 15, max 120). For example, if set to 30 minutes, tiles will be shown like "10:00" -> "10:30" -> "11:00" etc

Start Date - Select the start date when the data will be shown

From Hour / To Hour - Select the time range of the date to be shown. By default, the calendar shows data from the earliest hour of availability until the latest hour of availability.

Press Save to continue.

Use Case Example

That is how it will be displayed on the Client Portal.

Name of selected club zone.
Button used to show previous days.
Button used to show next days.
Time interval for which availability is shown.
Number of available zones from all sub-zones.
If none of sub-zones is available, tile is greyed out with proper information.
Date and day for which availability is shown.

Embedding

To embed the calendar on your website, contact the Perfect Gym Support Team and ask to turn on the following Setting ClientPortal.AllowedDomains for your database.

Embedding the calendar can be done in two ways.

Embedding #1 - Recommended!

This kind of embedding is recommended because of it's better responsiveness.

Create a div with id (for example "main"). This is a hook where the calendar will be shown.
Add script with the endpoint to Client Portal sdk.
Put code between <script> tags. The 'element' parameter must be the same as id of created div (for example "main").

<body>

<div id="main"></div>
<script src="https://COMPANYNAME.perfectgym.com/ClientPortal2/sdk"></script>

<script>
    PerfectGym.Calendars.init({
        clubZoneId: "5",
        daysPerPage: "7",
        timeInterval: "30",
        startDate: "2023-07-01",
        fromHour: "10:00:00",
        toHour: "16:00:00",
        element: '#main'
    });
</script>
</body>

Embedding #2 - via ClientPortal.Embed

Embedding with use of ClientPortal.Embed is deeply described here!

The only change here is to use the previously presented URL, e.g.: https://COMPANYNAME.perfectgym.com/ClientPortal2/ClubZoneOccupancyCalendar?ClubZoneId=5&DaysPerPage=7&TimeInterval=30&StartDate=2023-07-01&FromHour=10:00:00&ToHour=18:00:00 in url parameter of ClientPortal.Embed.

<script>
    window.onload = function () {
        var ClientPortal = window.PerfectGym.ClientPortal;

        // element to which ClientPortal will be appended
        var clientPortalElement = document.getElementById('pg-client-portal');
        var options = {
            url: "https://COMPANYNAME.perfectgym.com/ClientPortal2/ClubZoneOccupancyCalendar?ClubZoneId=5"
        }

        var embeddedClientPortal = new ClientPortal(clientPortalElement, options);
    }
</script>