Week Daily Availability Group

Overview
This block shows the availability of each day of one week at a time and allows the user to toggle left and right between weeks. Ideal for booking / Airbnb-type applications where you need to show a calendar for availabilities.
Structure
When this block is added to a page, it has a reusable element inside called weeklyavailability.This reusable element contains all of the logic and UI for the block.
The dates are displayed based on the variable var - week start day (of data type date) in Popup Hidden Variables
When the page is first loaded, the Current date/time is passed to var - week start day 
Clicking on Group Main previous and Group Main next would pass a different start day (minus or plus 7 days to Current date/time) to var - week start day

Other reusable on this page includes:
​filters_template (hidden by default in the title group)
How to set up
Open the weeklyavailability reusable
Open Popup Hidden Variables. 
This popup contains two group variables that are used in the week daily availability widget. For more information on how to use Popup Hidden Variables, click here.
var - Website object stores the app's website object. It is used in Group Main previous and Group Main next to pull the website's primary color.
var - week start day stores the week's start day date 
[OPTIONAL] Modify the data source of var - start day to include any filters you need
Update the placeholder conditionals on Text AVAILABLE? elements

Listing details with Icons and Menu Focus Group

Frequently Asked Questions (FAQ) Repeating Group

Last modified 2mo ago

Copy link

On this page

Overview

Structure

How to set up