# Calendar Strip Pro

**Category:** Display / Scheduling\
**Adalo Type:** Custom (New Build)\
**Author:** Custom

## Description

An enhanced horizontal date strip component that displays a scrollable row of dates with event marking dots and rich customization. Extends the existing Calendar Strip and Advanced Calendar Strip concepts with additional features: configurable visible days count, swipe-to-scroll navigation, selected date output for driving other components, dot indicators for events from a database collection, current time indicator, and customizable date format display. Ideal for mobile-first apps where vertical space is limited but persistent date navigation is needed.

## SETUP Tab

### Structure

Accordion-based structure with five sections:

* **Calendar Strip** (main configuration — collapsible, expanded by default)
* **Events** (data binding — collapsible)
* **Appearance** (colors & styling — collapsible)
* **Navigation** (icons & constraints — collapsible)
* **Actions** (click handlers — collapsible)

### Calendar Strip Section Props

| Prop                   | Type                    | Default           | Description                                                                            |
| ---------------------- | ----------------------- | ----------------- | -------------------------------------------------------------------------------------- |
| Visible Days           | Slider (Number)         | 7                 | Number of date cells visible at once in the strip (range: 3–14)                        |
| First Day of the Week  | Dropdown                | Sunday            | Which day appears first in the week display                                            |
| Language               | Dropdown                | English           | Language for day abbreviations in the strip                                            |
| Show Month/Year Header | Toggle                  | ON                | Whether to display a month/year label above the strip                                  |
| Show Day Name          | Toggle                  | ON                | Whether each date cell shows the day abbreviation (Mon, Tue, etc.)                     |
| Date Number Format     | Dropdown                | Day Only          | How the date number is displayed in each cell                                          |
| Default Date Type      | Dropdown                | Date/Time         | Determines the format of the Default Date field                                        |
| Default Date           | Text Input (Magic Text) | 0 (or YYYY-MM-DD) | Pre-selected date when the strip loads. Format depends on Default Date Type selection. |
| Highlight Today        | Toggle                  | ON                | Whether today's date gets a distinct visual indicator                                  |

#### Language Options

| Option     |
| ---------- |
| Arabic     |
| Chinese    |
| English    |
| French     |
| German     |
| Hindi      |
| Japanese   |
| Polish     |
| Portuguese |
| Spanish    |
| Russian    |
| Swedish    |

#### First Day of the Week Options

| Option | Description                          |
| ------ | ------------------------------------ |
| Sunday | Week starts on Sunday (US standard)  |
| Monday | Week starts on Monday (ISO standard) |

#### Date Number Format Options

| Option      | Description                                      |
| ----------- | ------------------------------------------------ |
| Day Only    | Shows just the day number (e.g., "15")           |
| Day + Month | Shows day and abbreviated month (e.g., "15 Jan") |

#### Default Date Type Options

| Option    | Description                                                     |
| --------- | --------------------------------------------------------------- |
| Date/Time | Uses magic 'Date & Time' values for the default date field      |
| Text Date | Uses text input in YYYY-MM-DD format for the default date field |

#### Conditional Visibility — Default Date Type

| Default Date Type | Default Date Field Behavior                                                                                 |
| ----------------- | ----------------------------------------------------------------------------------------------------------- |
| Date/Time         | Default Date shows "0" with helper "Use a Date & Time value". Supports Magic Text with date & time binding. |
| Text Date         | Default Date shows placeholder "YYYY-MM-DD" with help icon. Accepts text date input in YYYY-MM-DD format.   |

### Events Section Props

| Prop              | Type                    | Default           | Description                                                                             |
| ----------------- | ----------------------- | ----------------- | --------------------------------------------------------------------------------------- |
| Choose Collection | Collection Selector     | Empty (Select...) | Database collection containing event/marking records                                    |
| Event Start       | Text Input (Magic Text) | 0                 | Date & time field from the collection indicating event start                            |
| Event End         | Text Input (Magic Text) | 0                 | Date & time field from the collection indicating event end                              |
| Show Event Dots   | Toggle                  | ON                | Whether to display dot indicators on dates with events                                  |
| Max Dots Per Day  | Slider (Number)         | 3                 | Maximum number of dots shown per date cell (range: 1–5). Additional events show as "+N" |

### Appearance Section Props

| Prop                     | Type                    | Default               | Description                                                                                           |
| ------------------------ | ----------------------- | --------------------- | ----------------------------------------------------------------------------------------------------- |
| Background Color         | Color Picker            | #ffffff (white)       | Background color of the entire strip                                                                  |
| Date Color               | Color Picker            | #333333 (dark gray)   | Color for date numbers in default state                                                               |
| Day Name Color           | Color Picker            | #999999 (medium gray) | Color for day abbreviation text                                                                       |
| Selected Date Background | Color Picker (Branding) | Primary (@primary)    | Background color for the selected/highlighted date cell                                               |
| Selected Date Text Color | Color Picker            | #ffffff (white)       | Text color for the selected date number                                                               |
| Today Indicator Color    | Color Picker (Branding) | Primary (@primary)    | Color for today's date indicator (dot or ring)                                                        |
| Event Dot Color          | Color Picker (Branding) | Primary (@primary)    | Color for event dots below dates                                                                      |
| Header Text Color        | Color Picker            | #333333 (dark gray)   | Color for the month/year header text (if shown)                                                       |
| Cell Border Radius       | Slider (Number)         | 20                    | Border radius for date cells in pixels (range: 0–30). Use 30 for circular cells.                      |
| Strip Shadow             | Toggle                  | ON                    | Whether the strip has a bottom shadow                                                                 |
| Shadow Height            | Slider (Number)         | 2                     | Height of the shadow beneath the strip in pixels (range: 0–10). Only visible when Strip Shadow is ON. |

#### Conditional Visibility — Shadow Props

| Toggle       | State | Revealed Prop |
| ------------ | ----- | ------------- |
| Strip Shadow | ON    | Shadow Height |
| Strip Shadow | OFF   | (hidden)      |

### Navigation Section Props

| Prop                     | Type                    | Default            | Description                                              |
| ------------------------ | ----------------------- | ------------------ | -------------------------------------------------------- |
| Show Navigation Icons    | Toggle                  | ON                 | Whether left/right arrow icons appear at strip edges     |
| Go To Previous Icon      | Icon Picker             | chevron\_left      | Icon for scrolling dates backward                        |
| Go To Next Icon          | Icon Picker             | chevron\_right     | Icon for scrolling dates forward                         |
| Left Icon Color          | Color Picker (Branding) | Primary (@primary) | Color for the left navigation icon                       |
| Right Icon Color         | Color Picker (Branding) | Primary (@primary) | Color for the right navigation icon                      |
| Enable Swipe             | Toggle                  | ON                 | Whether horizontal swipe gestures scroll the date strip  |
| Earliest Selectable Date | Text Input (Magic Text) | Empty              | First date users can scroll to/select. Empty = no limit. |
| Latest Selectable Date   | Text Input (Magic Text) | Empty              | Last date users can scroll to/select. Empty = no limit.  |

#### Conditional Visibility — Navigation Icons

| Toggle                | State | Revealed Props                                                          |
| --------------------- | ----- | ----------------------------------------------------------------------- |
| Show Navigation Icons | ON    | Go To Previous Icon, Go To Next Icon, Left Icon Color, Right Icon Color |
| Show Navigation Icons | OFF   | (all hidden)                                                            |

### Actions Section Props

| Prop                      | Type        | Default    | Description                                             |
| ------------------------- | ----------- | ---------- | ------------------------------------------------------- |
| On Date Selected          | Action List | No Actions | Actions to perform when any date is tapped              |
| On Marked Date Selected   | Action List | No Actions | Actions to perform when a date with events is tapped    |
| On Unmarked Date Selected | Action List | No Actions | Actions to perform when a date without events is tapped |

## LAYOUT Tab

| Prop                             | Type     | Default            | Description                                             |
| -------------------------------- | -------- | ------------------ | ------------------------------------------------------- |
| Width Resizing                   | Dropdown | Scales with Screen | How the component width responds to screen size changes |
| Where is the component anchored? | Dropdown | Anchor Center      | Horizontal anchor position when screen resizes          |
| Sticky while scrolling?          | Toggle   | Off                | Whether component stays fixed during scroll             |

### Width Resizing Options

| Option             | Description                                              |
| ------------------ | -------------------------------------------------------- |
| Scales with Screen | Component width adjusts proportionally with screen width |
| Stays Fixed        | Component maintains its exact pixel width                |

### Anchor Options

| Option        | Description                                |
| ------------- | ------------------------------------------ |
| Anchor Left   | Component stays anchored to the left edge  |
| Anchor Center | Component stays centered horizontally      |
| Anchor Right  | Component stays anchored to the right edge |

## Builder Notes

1. **New custom component** — Not from marketplace; built from scratch to improve on existing Calendar Strip and Advanced Calendar Strip
2. **Configurable visible days** — Unlike existing strips that show a fixed 7 days, this supports 3–14 visible days via slider
3. **Three action types** — Separate actions for any date, marked dates, and unmarked dates
4. **Event dot support** — Shows dot indicators from a database collection, with configurable max dots per day
5. **Swipe navigation** — Supports horizontal swipe gestures in addition to arrow icon navigation
6. **Date range constraints** — Optional earliest/latest selectable dates to limit navigation
7. **Customizable cell shape** — Cell Border Radius slider allows square, rounded, or circular date cells
8. **Selected date output** — The selected date value is available to other components via Magic Text, making this strip useful as a date controller for lists and detail views
9. **12 languages** — Full language support matching existing calendar components
10. **Shadow control** — Optional bottom shadow with configurable height
11. **Branding tokens** — Selected Date Background, Today Indicator, Event Dot, and navigation icon colors use branding tokens
12. **Compact height** — Designed for placement at screen top, typically 60–80px tall


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.adalo.com/component-basics/marketplace-components/calendar-strip-pro.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.