Edit a day, or a whole week, as a rhythm.
<day-rhythm> is a drag-and-drop editor for a 24-hour cyclic schedule: heating setpoints, lamp scenes, watering, blinds, opening hours. You bring the meaning, it handles time, slots, the week, dragging and accessibility, and gives you plain JSON back.
Live example
A weekly heating schedule. Drag the handles, click a slot to change its setting, switch days, copy a day to others.
Why
Zero config works
Drop the tag in and you get a valid on/off day. Everything else is a documented option.
One JSON config
Models, presets, messages, classes and endpoints are keys of a single object: attribute, property or a JSON script child.
Daily or weekly
A daily schedule is a plain array. Weekly adds a week bar, carry-over between days, saved days and copy-to.
Pure core
All time logic lives in DOM-free functions you can import on a Node server, with shared test vectors for ports.
Accessible
Slider handles with keyboard control, native dialogs, live-region announcements, reduced-motion and forced-colors support.
Styled your way
Four themes, CSS variables, ::part() and per-part classes that work with Tailwind.
Quick start
<day-rhythm id="d"></day-rhythm>
<script type="module" src="https://cdn.jsdelivr.net/npm/dayrhythm"></script>
<script>
d.addEventListener('change', (e) => console.log(e.detail.value));
</script>More in the README: npm, React, packs, theming.
Support
dayrhythm is free and MIT licensed. If it saves you time, an optional donation helps me keep improving it. It is never required and the component does not show it inside your app by default.
Support the project