# 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