1. Add the `Events Calendar` element to your mobile page. 2. Set `Events JSON` to a JSON array of calendar events.
3. Choose the default `View type`: `month`, `week`, `day`, or `list`.
4. Set `Initial date` if you want the calendar to open on a specific month or day.
5. Set `Selected date` if you want a date selected when the calendar first loads.
6. Use `First day of week` to choose whether weeks start on Sunday or Monday.
7. Turn `Show title bar` on or off depending on whether you want the calendar header visible.
8. Turn `Show tab bar` on or off depending on whether users should switch views inside the calendar.
9. Turn `Swipe to change view` on if users should swipe horizontally between Day, Week, Month, and List views.
10. Turn `Show search` on if you want a search icon in the header. Use the `Search clicked` event to open your own search UI.
11. Customize colors, typography, spacing, event cards, tabs, and timeline settings from the visual fields.
12. Use workflow actions when you need to control the calendar dynamically:
`Set events`, `Select date`, `Set visible date`, `Set view`, `Next month`, `Previous month`, `Go to today`, and `Clear selection`.
13. Use states such as `Selected date`, `Selected events JSON`, `Selected events count`, `Visible month`, `Visible month label`, `Selected event JSON`, and `View type` to power workflows and page UI.
14. Use events such as `Date selected`, `Event selected`, `Month changed`, `View changed`, `Events changed`, `Selection cleared`, and `Search clicked` to trigger workflows.

## Event JSON Format

Pass events as a JSON array. Each object can include fields like:

```json
[
 {
   "id": "evt_001",
   "title": "Team Standup",
   "date": "2026-04-27",
   "start_time": "09:00",
   "end_time": "09:30",
   "location": "Zoom",
   "tag": "Work",
   "color": "#38BDF8",
   "description": "Daily team sync"
 },
 {
   "id": "evt_002",
   "title": "Design Review",
   "date": "2026-04-27",
   "start_time": "11:00",
   "end_time": "12:00",
   "location": "Studio A",
   "tag": "Work",
   "color": "#38BDF8"
 },
 {
   "id": "evt_003",
   "title": "All Day Planning",
   "date": "2026-04-28",
   "tag": "Planning",
   "color": "#22C55E"
 }
]