demo D376
A week of bookings you can reschedule: JavaScript Data Grid Demo
A calendar bound to the grid: drag a card to another slot and the grid's Start and End cells change with it, with a veto on client calls outside business hours
createCalendar · beforeMove
This shows a week of bookings as a calendar bound to the grid above it, so a drag on a card changes the grid's own Start and End cells. It turns a table of dated rows into a schedule people can move things around on, without keeping a second copy of the data.
One set of rows, drawn as a table and as a week
A table of bookings answers “what is on” only if you read every date. This calendar draws the very same rows as cards on a week with an hour axis, so overlap, gaps and the one all-day item are visible at a glance. It is bound to the grid rather than handed a copy, so it follows the grid: filter or sort the rows and the calendar narrows with them.
Drag a card to another day or hour slot and the move is written back through the grid’s own edit path. The Start and End cells in the grid change, the edit is validated like any other and it sits in the same undo history. If the grid refuses the write, the card snaps back.
Every move is reviewed before it commits. In this demo a client call cannot be dragged before 09:00 or after 17:00, and the veto gives its reason. Internal meetings move freely. Overlapping meetings are split into side-by-side columns, and the multi-day conference stacks in its own all-day row. Switch to the month grid to see the same rows as cards, with the multi-day span drawn as one bar.
How do I show my grid’s rows as a calendar?
Load the calendar module and call createCalendar(element, { grid, startProperty, endProperty, view }), passing the live grid. Use view: 'week-time' for the hour axis or 'month' for the month grid, and map the card face with card. Handle beforeMove to veto a move with a reason. See the how to show a data grid as a calendar guide for the full example.