# Week Daily Availability Group

## Overview

![](https://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FoZJ2wnXxes1L2UJWWbwf%2Fweek1.png?alt=media\&token=93af3d58-7dd7-4b02-b520-062944397b7a)

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://271263854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnL1n10Xf3r4xIND5AZqa%2Fuploads%2FeSy9ozBNJua3xq8xdw3P%2Fweek2.png?alt=media\&token=64007d33-4d53-45d3-833f-a10da1a5b989)