Schedule picker: a weekly time-block editor (demo + source)

[duemti]

Hi! I needed a way to edit a recurring weekly schedule (blocks of time per weekday), and none of the existing Flux components covered it, so I built one on top of Flux and Alpine. It's modelled on the "Recurring Schedule" editor in Ubiquiti's UniFi Protect.

Live demo, API and full source: https://claude.ai/artifact/ETTDkmNjXcp3kbffSwz76N

<flux:schedule-picker wire:model.live="schedule" time-format="12-hour" timezone="Europe/Chisinau" />

The value is a plain list: [{ "day": "monday", "start": "09:00", "end": "17:00" }, …]. end can be "24:00".

What it does:

• Click an empty row to add a block, or drag to draw one. Everything snaps to step minutes.
• Drag a block to move it, including to another day. A solid copy follows the pointer and turns striped where it can't be dropped. Drag its edges to resize.
• Click a block to edit it in a popover with time pickers, All day and Remove.
• The value is only written when an interaction finishes, so wire:model.live sends one request per change.
• It supports keyboard use, dark mode, the accent colour, a disabled state and an optional "Local time" footer.

Typical uses are opening hours, staff shifts, access windows, quiet hours and recording schedules.

I know Flux's components are built as ui-* web elements, so I don't expect this to be merged as-is. I'm offering it as a working reference in case it's a fit for Flux. I'm happy to adjust the API or behaviour if you have opinions.

[duemti]

fluxui is moving very slow for this day and age...