# Week Daily Availability Group

## Overview

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MW3IlUFZn24KNva4D4v%2F-MW3KHMZ4JBaZi211RDl%2Fweek.png?alt=media\&token=3cfddbce-216c-4f05-a969-b41119707804)

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**<br>
* Other reusable on this page includes:
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters) (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](https://docs.airdev.co/canvas/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup).
  * **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&#x20;
* \[OPTIONAL] Modify the data source of `var - start day` to include any filters you need
* Update the placeholder conditionals on **Text AVAILABLE?** elements

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MR424zVHlxWL9RTmKA9%2F-MR4NXLhp6isYjI6rqgt%2FScreen%20Shot%202021-01-15%20at%201.30.07%20AM.png?alt=media\&token=b43733ca-3183-424f-86fc-4580c4530edf)