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