# Week Daily Availability

## Overview

This module 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 of availabilities.

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcY67uKN7NTLJxzbw-t%2F-LcY1ZolVgqWfirpX_c2%2FScreen%20Shot%202019-04-15%20at%203.06.55%20PM.png?alt=media\&token=84207b36-ba68-4478-a07e-4b330f0d9d35)

## Structure

* When this module is added to a page, it has a reusable element inside called `weekDailyAvailabilityGroup`.This reusable element contains all of the logic and UI for the module.
* The dates are displayed based on the variable `var - week start day` (of data type date) that you provide

## How to set up

* Open the `weekDailyAvailabilityGroup` reusable

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-Lc2o_oOjfUcnjUxrX_V%2F-Lc2voopCQmGdwuBaSRI%2FScreen%20Shot%202019-04-09%20at%202.09.11%20PM.png?alt=media\&token=1ac16d9b-bee7-4c64-873a-94dc0e8fc64f)

* 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/general-information/functionality/hidden-variables-popup).
  * `var - Website object` stores the app's website object. It is used in `Text PREV` and `Text NEXT` to pull the website's primary color.
  * `var - start day` stores the week's start day date 

![](https://8331092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LcY67uKN7NTLJxzbw-t%2F-LcY797Hp90kp--ex1Ak%2FScreen%20Shot%202019-04-15%20at%203.31.20%20PM.png?alt=media\&token=0272b5af-d04a-4ae0-8fbe-0d01525c62aa)

* \[OPTIONAL] Modify the data source of `var - start day` to include any filters you need