Recipes

Each recipe is a self-contained example showing one capability of the component. They all share the same primitives — only the data, hooks, and rendering vary.

Patterns

• Display-only — pure read-only render, no hooks
• Click-to-create — single-click creates a 1-hour task at the clicked minute
• Full interactivity — drag + resize + drag-to-create combined via composeShadulerTaskProps
• Week view — columns are days of the week instead of resources
• Grouped columns — two-row header where outer cells span groups (days × resources)
• Many resources — 100 columns with horizontal scroll and minColumnWidth
• Custom render — extend ShadulerTaskData and render task children with status icons
• Locales — formatTime with BCP 47 locale via Intl.DateTimeFormat
• Partial hours — salon range 08:30 → 18:30 via startMinute/endMinute
• Custom row labels — render shift names instead of clock times
• All-day events — multi-day strip above the hourly grid
• Cross-midnight events — split helper that turns a single event into two visual rows
• Full customization — kitchen-sink demo combining view modes, date navigation, add/edit dialogs, overlap detection, and all three interaction hooks
• Animated loop — choreographed storyboard with enter / exit / slide / colour-change transitions; the grid reads like a short video

Click any recipe for a live preview and the source.