Lattice Grid Buy a licence

the calendar view · v1.107.0

JavaScript Calendar View for a Data Grid

A booking or schedule view of the rows you already have. Name the start and end columns and the same data is drawn as cards on a week or a month. Drag a card to another slot and the grid's own Start and End cells change with it.

Try it live Read how to add a calendar

Building…
Loading a live grid…
Also in your licence

a view, not a second store

The calendar and the table are the same rows.

A calendar bolted on beside a grid usually means a second copy of the data, kept in step by hand. This one is bound to the grid. Drag a card in the demo above and watch the Start and End cells in the grid above it change. Try dragging a client call outside 09:00 to 17:00 and the move is refused with its reason.

what it does

A schedule you can move things around on.

  • Bound to the grid

    Pass the live grid and the calendar reads its filtered, sorted rows. Filter the grid and the calendar narrows with it.

  • A drag is an edit

    Move a card to another day or slot and the move is written through the grid's own edit path, so it is validated and kept in undo history. A refused write snaps the card back.

  • Hour axis and month grid

    A week with an hour axis, a day, or a month grid. Overlapping meetings split into side-by-side columns and all-day items stack in their own row.

  • Veto a move with a reason

    A beforeMove handler can refuse a drag and say why, for a rule such as client calls staying inside business hours.

  • One feed, many views

    A Data Router feed can drive the calendar the same way it drives a grid or a chart, as keyed diffs.

  • Your framework, or htmx

    Wrappers for React, Vue and Angular, and an htmx module that builds the calendar from a server-rendered table.

demos

Run it, then change it.

All demos →

docs

Reference and the rest of the product.

Also in the licence