Skip to content

Add RRuleEditor composite widget (recurrence editor for calendar / scheduling) #39

@prakashUXtech

Description

@prakashUXtech

Context

Recurrence editing in operator-surface forms typically needs a UI that wraps the RFC 5545 RRULE format. Today there's no composite widget for this — calendar event drawers, recurring-task editors, scheduled-pocket triggers all need to roll their own.

Surfaced during paw-enterprise#220 (calendar event drawer). Recurrence was scoped down to a plain dropdown (none / daily / weekly / monthly / custom) because composing the full editor inline would have ballooned the PR.

What to add

src/lib/widgets/composite/RRuleEditor.svelte — composes existing primitives into a usable RRULE builder:

  • Frequency: Segmented control (None / Daily / Weekly / Monthly / Yearly / Custom)
  • Interval: NumberInput (Every N days / weeks / etc.)
  • By weekday (when frequency = Weekly): toggle group of S M T W T F S
  • By monthday (when frequency = Monthly): dropdown for "Day N of month" OR "Nth weekday of month"
  • Terminator: Segmented (Never / Until date / After N occurrences)
  • End date (when terminator = Until): DatePicker
  • Count (when terminator = After): NumberInput
  • Preview: human-readable summary ("Every 2 weeks on Mon, Wed, Fri until Dec 31")
  • Custom mode: bypass the form and accept a raw RRULE string with validation

API sketch

<script>
  let { value = $bindable(''),         // RRULE string (RFC 5545)
        startDate = new Date(),         // anchor for the recurrence
        timezone = 'browser',
        showPreview = true,
        disabled = false } = $props();
</script>

Internally uses rrule npm package or dateutil-equivalent for parsing/generation. The bindable value is always a normalized RRULE string consumable by any RFC 5545-compatible backend (gcal, outlook, ical, pocketpaw#1132's Calendar module).

Design considerations

  • Composes existing primitives only (Segmented, NumberInput, DatePicker, Select). Don't reinvent.
  • Preview line gives non-technical operators confidence in what they've configured
  • Keyboard navigation across the form fields
  • Accessibility: each section has a clear label; preview is an aria-live region
  • Reject invalid combinations with inline error messages

Acceptance

  • Component file at src/lib/widgets/composite/RRuleEditor.svelte
  • Test file covering: round-trip parse/generate, common patterns (daily-for-30-days, every-other-week-on-MWF, monthly-on-15th, yearly-on-anniversary), invalid input handling
  • Exported from src/lib/widgets/composite/index.ts
  • Preview line renders for all supported patterns

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions