the resource scheduler
Resource Scheduler for JavaScript: Team Workload
Put people in rows and their assignments on a shared time axis, then see who is booked past what they can do. Drag a bar to move it, drop it on another person to hand it over, and watch the workload band for each row show where the week is over-allocated before it becomes a problem.
Open the public demo → Its source on GitHub → Read the scheduler API →
one view, two panes
A real grid on the left, a timeline on the right.
The people are rows of a real Lattice grid, so grouping, sorting and column choices work as they do anywhere else, and the timeline beside it follows the same rows. The grid is the one your page already loads, so the scheduler adds nothing to a page that never shows one.
Your fields, no rename required
Name the fields that hold the resource, the start, the end and the label, and the scheduler reads your assignments as they are. With no list of people it derives the rows from the assignments themselves.
Changes you can veto and keep
Each edit raises a cancellable event before it lands and a change event after, so a booking rule of your own can refuse a move, and what lands is written back the way a grid edit is. The view state, zoom and scroll, can be saved and restored.
what the scheduler gives you
Who is booked, and who is booked too much.
Drag, resize and reassign
Drag a bar to move it in time, drop it on another person to reassign it, drag either edge to resize it, or drag across empty time to create one. Delete removes it, and every change is one undo step, by button or Ctrl or Cmd+Z.
Workload and over-allocation
Turn on the workload band and each row draws how much of that person’s own capacity is booked in every period. An over-allocated period is flagged with a warning glyph as well as colour, and named in a summary a screen reader can read.
Group and search
Group the people by team into collapsible rows, in step with the grid on the left. A search narrows people and bars together, and a person stays in view when one of their bookings matches.
Zoom from hours to quarters
Hour, day, week, month and quarter presets, or fit the plan to the width. Zoom with Ctrl and the wheel or with plus and minus, and the axis labels stay readable at every scale.
Plans by resource
Build the scheduler straight from a Gantt plan, from any rows that carry a resource, a start and an end, or from a calendar. Reassign a task here and the plan underneath is updated.
Every framework, and htmx
Wrappers for React, Vue, Svelte and Angular, and a data attribute for htmx pages. Each person’s own calendar shades their non-working days, and the keyboard reaches every bar.
Rows and time are both virtualised, so hundreds of people and thousands of assignments stay smooth. Every bar, row and group is named for a screen reader, and the visible range can be exported as a print-safe SVG.
a scheduler over plain rows
Hand it people and assignments.
Drop in two script tags, then hand createScheduler your people and
their assignments. Group by a field, switch the workload band on, pick a zoom, and listen for
the change event to save what a drag did.
The scheduler is a separate, opt-in module with a global of its own. See its size next to every other module in the module map. The same demo, as a standalone project, is in the public demo repository.
<!-- the grid and the scheduler module, as globals -->
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1/lattice-grid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1/modules/scheduler.min.js"></script>
<script>
var scheduler = LatticeGridScheduler.createScheduler(document.querySelector('#team'), {
createGrid: LatticeGrid.createGrid, // the page's own grid, never bundled
resources: people, // { id, name, role, capacity }
events: assignments, // { id, resourceId, name, startDate, endDate }
groupBy: 'role', // collapsible team rows
workload: true, // booked share of each person's capacity
zoom: 'fit'
});
// A reassign or a move arrives here once, after it has landed.
scheduler.on('event:change', function (e) { save(e.id, e.newValues); });
</script>Build the schedule on localhost, free.
Development on localhost needs no licence key, so you can point the scheduler at your people and see it move before you decide anything. Licence per domain when you ship.
The resource scheduler SchedulerConfig Scheduler The project plan view The board view Drive it from one feed Documentation