MoveSheet
A sheet to move an event by picking a day, a time and a length, without dragging.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, Card, MoveSheet, Row, Stack, Text } from '@weft-js/warp'import { at } from '@weft-js/warp-core'import type { CalEvent, Slot } from '@weft-js/warp-core'export function Reschedule() { const open = state(false) const event = state(REVIEW) const move = (e: CalEvent, to: Slot) => (event.value = { ...e, start: at(to.date, to.s), end: at(to.date, to.e) }) return ( <Card title={event.value.title} sweep={false}> <Stack gap="related"> <Text subtle>{when(event.value)}</Text> <Row><Button emphasis="outline" tone="neutral" onClick={() => (open.value = true)}>Move</Button></Row> </Stack> <MoveSheet open={open} event={event.value} events={TEAM_EVENTS} firstDayOfWeek={1} locale="en-GB" hourCycle="h23" onMove={move} /> </Card> )}const TEAM_EVENTS: CalEvent[] = [ { id: 'e1', title: 'Platform standup', start: '2026-11-02T09:00', end: '2026-11-02T09:15', cal: 1, recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', location: 'Room Atlas', attendees: ['Mara Lindqvist', 'Jun Tanaka'] }, { id: 'e2', title: 'Platform standup', start: '2026-11-03T09:00', end: '2026-11-03T09:15', cal: 1, recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', location: 'Room Atlas', attendees: ['Mara Lindqvist', 'Jun Tanaka'] }, { id: 'e3', title: 'Checkout review', start: '2026-11-03T10:00', end: '2026-11-03T11:00', cal: 2, video: true, attendees: ['Priya Raman', 'Tomás Oliveira', 'Mara Lindqvist'] }, { id: 'e4', title: 'Incident review: mobile-bff', start: '2026-11-03T13:00', end: '2026-11-03T13:45', cal: 4, video: true, location: 'Room Birch', attendees: ['Sam Okafor', 'Inés Vidal', 'Jun Tanaka'] }, { id: 'e5', title: 'Ranking v2 handover', start: '2026-11-03T15:00', end: '2026-11-03T16:00', cal: 3, location: 'Room Cedar', attendees: ['Lena Fischer', 'Noor Haddad'] }, { id: 'e6', title: 'Priya out of office', start: '2026-11-03', end: '2026-11-03', allDay: true, cal: 6 }, { id: 'e7', title: 'Release 2026.11', start: '2026-11-04T11:00', end: '2026-11-04T12:00', cal: 5, attendees: ['Mara Lindqvist', 'Jun Tanaka', 'Tomás Oliveira'] }, { id: 'e8', title: 'Design crit', start: '2026-11-04T14:00', end: '2026-11-04T15:00', cal: 2, tentative: true, video: true }, { id: 'e9', title: 'Cost review', start: '2026-11-05T10:00', end: '2026-11-05T11:00', cal: 1, recurrence: 'FREQ=MONTHLY', attendees: ['Mara Lindqvist', 'Lena Fischer'] }, { id: 'e10', title: 'On-call handover', start: '2026-11-06T16:00', end: '2026-11-06T16:30', cal: 1, recurrence: 'FREQ=WEEKLY', video: true },]const REVIEW = TEAM_EVENTS.find(e => e.id === 'e4')!const when = (e: CalEvent) => `${e.start.slice(0, 10)}, ${e.start.slice(11)} to ${e.end.slice(11)}`Installation
npm install @weft-js/warpUsage
tsx
import { MoveSheet } from '@weft-js/warp'When to use
Use it for
- Moving an event on a touch screen
- Any time a drag is not an option
Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | A state you own. |
event | CalEvent | null | — | The event to move. |
events | CalEvent[] | — | The rest of the calendar. |
firstDayOfWeek | number | — | The day the week strip starts on, 0 for Sunday to 6. Default 1, Monday. |
locale | string | — | The language and region used to format values. |
hourCycle | string | — | h12 for AM and PM, h23 for a 24-hour clock. The locale's otherwise. |
step | number | — | Minutes per press of Shorter or Longer. |
| Event | Type | Default | Description |
|---|---|---|---|
onMove | (e: CalEvent, to: Slot) => void | — | Gets the event and where it should go. |
onClose | (() => void) | — | It closed. |
RelatedAgendaEvent editor