# Week Daily Availability Group

## Overview

![](https://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/9hqEqx1gJ4wqzd9hhjGE/week1.png)

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://content.gitbook.com/content/BkgECRNg8RcsrMGCH9BI/blobs/7NruGFYFVjWvOAt1G99N/week2.png)