Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Calendar
  2. Event Recurrence Picker
  3. Usage

Event Recurrence Picker

Usage

Overview
RecurrenceField from @prepared911/ui/recurrence-field lets operators configure a repeating schedule in one place. It composes a time range, an all-day switch, a start date, a time zone select, and a repeats rule, plus a summary sentence—so an operator defining "weekdays 09:00 to 17:00 until 12/31/2026" sees the whole rule. The committed value is an EventRecurrencePickerValue. formatRecurrenceSummary is the same sentence the field shows. Today this is primarily the non-emergency intent scheduler—see manage-nonemergency/Intents/IntentModal/components/CreateSchedulePopover.tsx and ConfiguredScheduleEntry.tsx for the two canonical call sites.
FromTo
: – :
Repeats weekly, starting April 20, 2026 · 09:00–17:00.
Reset zoom to 100%
When to use
  • Repeating schedules. On-call rotations, recurring availability windows, and intent schedules all need frequency + end rule + start anchor together; a flat form buries the rule.
  • Surfaces that show a summary chip. When the committed rule is echoed as a Badge (see ConfiguredScheduleEntry), formatRecurrenceSummary gives operators and reviewers the same sentence.
  • Multi-rule compositions. When an operator configures two or more overlapping schedules, each instance of the picker keeps its rule contained and editable in place.
When not to use
  • One-off date + time. Use DateTimePicker. The recurrence machinery is overhead.
  • Calendar-bound filters. Use AdvancedDateRangePicker or AdvancedDateTimeRangePicker; recurrence does not apply to search or analytics filters.
  • Ad-hoc instances of a series. Use a separate DateTimePicker or Calendar with a note; recurrence is for the rule, not individual events.
Composition
The picker renders three conceptual groups. Choosing Custom replaces the main form with the custom panel. Back returns to the main form. The summary stays the readable record of the rule:
  • Frequency. A Select over the calendar picker's options: Daily, On weekdays, On weekends, Weekly, Every 2 weeks, Monthly, Monthly on the nth weekday, Annually, and Custom. Weekdays and weekends appear only when the start date matches.
  • Custom options (when Custom). A panel for the interval, weekday toggles, monthly mode, and an end of Never, On a date, or After a count. Back returns to the main form.
  • Schedule body. Start and end times, an all-day Switch, a start date via DateInput, and a time zone Select labeled with the GMT offset and city.
  • Summary line. The field fills copy.summary into one sentence and announces it with aria-live="polite". formatRecurrenceSummary returns that sentence for a chip.
confirm adds Reset / Apply; pairing trigger with confirm and open / onOpenChange turns the whole control into a popover (see CreateSchedulePopover).
Content guidelines
  • Summary copy is the source of truth. Let formatRecurrenceSummary drive any echoed chip: don't reformat the rule yourself.
  • Sensible defaults. Start time defaults to 09:00 and end time to 17:00. If your product has different business hours, pass a seeded value rather than expecting operators to reset.
  • End on vs end after. "End on Dec 31" is clearer for fixed-term rotations; "end after 10 occurrences" is clearer for limited runs. Pick the default that matches your most common case.
  • Write for reviewers. The summary is often displayed to someone other than the author (audit logs, approval surfaces): keep product-side labels concrete ("Schedule:", not "Config:").
Behavior and states
  • Draft-only state for confirm + trigger. When both are set, the picker tracks in-progress changes internally and only emits onValueChange when Apply fires: so closing the popover via Escape or outside-click discards the draft, matching the modal-commit expectation.
  • Summary updates with the draft. Every edit recomputes the sentence before Apply. Reset restores the value from when the popover opened.
  • Custom panel. Choosing Custom shows the interval, weekday, monthly-mode, and end controls, with Back to the main form. The summary sentence on the main form already states the custom rule.
  • Disabled cascading. disabled cascades to every sub-control so a parent "view only" state doesn't let part of the rule stay editable.
Customization
  • Start and end defaults. Pass a seeded value with the product's default start time, end time, and time zone. An empty field uses 09:00–17:00 and the zone from useLocale.
  • disableFuture. Prevents selecting a future start date; useful when the series must begin today or earlier.
  • trigger + open + onOpenChange. Use for popover-driven entry; leave them off for inline panels.
  • confirm. Required when you want deferred commits. Without it, every change dispatches: acceptable in a dedicated form but not in a popover.
Best practices
Do
  • Echo formatRecurrenceSummary in any committed chip: keeping two copies of the sentence in sync by hand is a bug farm.
  • Pair confirm with a popover via trigger + open so closing discards the draft.
  • Align default start / end times with organizational business hours and document the assumption in surrounding help text.
  • Keep one RecurrenceField instance per rule; if you need two rules, render two pickers, not a multi-select.
Don't
  • Don't recreate the rule with individual form fields when a rule is repeating: operators lose the summary and the validation that comes with the picker.
  • Don't bind the picker's internal draft to filter state: it's a committed rule, not an incremental query.
  • Don't hide the summary line to save space: it is the only plain-language view of the rule.
Accessibility
The picker chains multiple sub-controls (Combobox, Switch, Calendar, TimeInput). Tab order, focus on open, and announcing the summary on changes are part of the app's responsibility; the picker supplies the visible prose and the draft-commit discipline. See the Accessibility page for the full contract, including the aria-live pattern for the summary.
Related
  • Date Picker: the calendar grid embedded in the schedule body.
  • Date Time Picker: one-off date + time without recurrence.
  • Time Picker: the time input used inside the range.
Previous
Date Time Picker / Accessibility
Next
Event Recurrence Picker / API and Development
On this page
Overview
When to use
When not to use
Composition
Content guidelines
Behavior and states
Customization
Best practices
Accessibility
Related