# Calendar picker
The calendar picker is a user interface component that lets users select a specific date, which is then submitted to your backend in [ISO format](https://en.wikipedia.org/wiki/ISO_8601).
## 👉 **The Tags**
**📍 Where to add the tag?** A rectangle layer**.**
To incorporate a calendar into your app, choose the appropriate tag based on your needs:
**Select one day**
For allowing users to select a single date, use the `single` tag:
```
[component:input-calendar:single]
```
**Select multiple non-consecutive dates**
To enable selection of **multiple non-consecutive dates**, utilise the `multiple` tag:
```
[component:input-calendar:multiple]
```
**Range**
To select a range of dates including start and end dates, use the following syntax:
```
[component:input-calendar:range]
```
## ️:paintbrush: Calendar styling
**Add a specific text color**
```
[style:color:]
```
**Add a color to the active text**
```
[style:active-text-color:]
```
**Add a color to the selected date**
```
[style:active-color:]
```
**Add a background color**
```
[style:bg-color:]
```
## 🏷️ **How to add the tag**
1. Choose the type of calendar you'd like to use.
2. Paste the tag into the layer name of a rectangle shape.
3. Add a styling tag of your preference.
4. Ensure you include the `[action:submit]` tag, which triggers the action to transmit the data to your backend.
5. [Preview your app on **Bravo Vision**](https://docs.bravostudio.app/get-started/bravo-vision-previewer#how-to-use-bravo-vision)**.** 🚀
## 💾 Example files
Duplicate the files below to see how to set it up!
{% embed url="" %}
Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the [community](https://community.bravostudio.app/home).
.jpg?alt=media&token=d157b7ab-ad87-4289-8293-ae8009fe9214)
