> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas-pages-and-modules/2.0.0/modules/week-daily-availability.md).

# 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

![](/files/-MR4NXLhp6isYjI6rqgt)