Reusable EventScheduler component in livehealth-frontend for recurring schedules (daily, weekly, monthly, yearly)

Event Scheduler

EventScheduler is a livehealth-frontend reusable UI for defining repeating schedules: pick a cadence (daily / weekly / monthly / yearly), set frequency (every occurrence, alternate, or custom interval), define when the series ends (after N events or on a date), then generate a list of ISO datetime occurrences.

Source: src/components/reusable/EventScheduler/

Purpose

Centralize recurrence UX (tabs + shared frequency/end form) instead of reimplementing it per feature.
Produce an array of { date: string } entries via generateRepeatEventDates, which parents store under a configurable key (e.g. scheduled_trips).

Where it is used

The primary integration today is B2B Collection → Trip Management → Create trip, when the user enables a repeat trip and has not yet materialized scheduled instances: AddEditTripModal passes dateKey="scheduled_trips" and wires repeatTripDetails into the trip form so POST …/trips/new/bulk can run with those dates.

Other features can reuse the same component with a different dateKey and eventType label.

Props

Prop	Type	Role
`dateKey`	`string`	Key under which generated dates are merged into `repeatEventDetails` (e.g. `"scheduled_trips"`)
`activeTab`	`number`	Selected tab index: `0` daily, `1` weekly, `2` monthly, `3` yearly
`setActiveTab`	`(index: number) => void`	Updates active tab when user switches recurrence type
`startDate`	`string`	Anchor for time-of-day; first occurrence scheduling is derived relative to this
`eventType`	`string`	Display label for the recurring entity (e.g. localized `"Trip"`)
`repeatEventDetails`	`JsonObject`	Stateful recurrence payload (see shape below)
`setRepeatEventDetails`	`(value: JsonObject) => void`	Parent updates state when user edits or clicks Next
`isRtl`	`boolean`	Optional RTL layout

On mount, the component initializes repeatEventDetails with defaults (scheduledOn, repeatCycleType, frequency, ends, etc.).

Repeat details shape (conceptual)

Parents should treat repeatEventDetails as the single source of truth. Important fields used by generateRepeatEventDates:

Field	Meaning
`scheduledOn`	First anchor date/time for the series (component sets this from `startDate` + tab)
`repeatCycleType`	`0`–`3`: daily, weekly, monthly, yearly (`REPEAT_CYCLE_TYPE_*` in `utils/constants.ts`)
`frequency`	`{ value }` where `0` = every, `1` = alternate, `2` = custom (`repeatEvery` required)
`repeatEvery`	Custom interval when `frequency.value === 2`
`ends`	`{ value }` where `0` = after N events, `1` = end on date
`endAfterEvents`	Max count when ending “after” (capped at 365 in UI validation)
`endOnDate`	End boundary when ending “on”
`[dateKey]`	After Next, array of `{ date: string }` (e.g. `scheduled_trips`)

Frequency option lists are REPEAT_EVENT_*_FREQUENCY_OPTIONS; end options are REPEAT_EVENT_ENDS_OPTIONS.

Next button

Next runs generateRepeatEventDates(repeatEventDetails, startDate) and sets:

setRepeatEventDetails({ ...repeatEventDetails, [dateKey]: dates }).

Next is disabled when:

Custom frequency is selected but repeatEvery is missing or invalid.
End is “on date” but endOnDate is empty.
End is “after” but endAfterEvents is invalid or > 365.

`generateRepeatEventDates`

File: EventScheduler/utils/helpers.ts

Copies time of day from startDate onto the computed occurrence dates.
Supports consecutive, alternate, and custom intervals per cycle type.
Monthly / yearly: skips invalid calendar days (e.g. day 31 in a short month) instead of producing bad dates.
Stops when max event count or end date is reached.

Internal structure

Path	Role
`index.tsx`	`EventScheduler` — tabs, init effect, Next handler
`Components/RepeatEventDaily.tsx` (and Weekly, Monthly, Yearly)	Per-tab wrapper around shared form
`Components/RepeatEventFrequencyAndEndForm.tsx`	Frequency + end criteria inputs
`utils/helpers.ts`	`generateRepeatEventDates`
`utils/constants.ts`	Cycle types, frequency enums, `DAYS_IN_YEAR`, i18n option lists
`utils/controls.scss`	Styles; imports `react-datetime` CSS from root

B2B Collection — Route & trip UI — trip modal context for repeat schedules

Overview