# Week Daily Availability

## 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 ***new\_week***.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***

## How to set up

* Open the ***new\_week*** 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 
* \[OPTIONAL] Modify the data source of `var - start day` to include any filters you need
* Update the placeholder conditionals on ***Text AVAILABLE?*** elements

![](https://576109535-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)