A team scheduling template where you plan people's time by drag and drop. People and tasks sit on both sides of a calendar: drop a person or a task on a time slot, pick the rest in a small editor, done. It comes as two complete apps, one in React 19 and one in Vue 3, that look and behave the same.

The design is black and white with frosted glass panels, and vivid colors only where they carry meaning: the tasks. Each task color comes with its own text color, so every slot stays readable.

What sets it apart

• Built around drag and drop. Drag a person or a task onto the calendar, drop a person on a slot to add them, select an empty range to create a slot, drag a slot to move it, pull its edge to resize it. Overlapping slots sit side by side, and the editor warns when someone is already booked.
• React and Vue, same result. Both apps render the same HTML and share one framework-agnostic TypeScript core: types, store, scheduling rules, drag and drop engine and styles. Pick the framework your team uses.
• Ready for your backend. All data goes through one small interface. A REST client is included and switches on with one environment variable, and a dependency-free demo API server shows the exact contract. The store updates the screen instantly, sends calls in order, reloads on errors and lets users undo.

Features

• Week view: time grid, "now" line, optional weekend switch, per-person and per-task totals for the period.
• Month view: compact rows with time and task, daily totals, "+N more" links to the week.
• Team and task panels: search, add, rename and delete inline, choose task colors from the palette.
• Filter: click a person or a task to highlight their slots; hover for a preview.
• Slot editor: day, start and end times, task and people, with a conflict warning.
• Undo for new slots and deletions, from the notification.
• Keyboard: shortcuts for navigation, views and weekend, N to create a slot, every slot reachable and editable from the keyboard.
• Mobile view below 768 px: read-only, one day at a time, a week strip with colored dots, swipe between days, a details sheet for each slot.
• Accessibility practices: landmarks, labeled controls, visible focus, focus management in dialogs, WCAG AA text contrast. The main views pass an automated axe-core check (WCAG 2 A/AA) in both apps. Drag and drop needs a pointer; the editor is the keyboard alternative.
• No external requests: fonts are bundled. There is no CDN, analytics or tracking.

Technical details

• React 19.3, Vue 3.5, TypeScript 5.9, Vite 8
• npm workspaces: one npm install for both apps, a typed build for each
• One settings file per app: locale, texts, task palette, hour height, time step, default duration, weekend, mobile breakpoint
• Design tokens in one CSS file; self-hosted Geist and Geist Mono fonts
• Full HTML documentation: installation, file structure, configuration, customization and translation, connecting your API (REST contract, authentication, format mapping, custom data sources), deployment, browser storage, accessibility, browser support, third-party licenses

Requirements and limitations

• Node.js 22.12 or later and npm to install, run and build.
• Front end only: there is no backend, database or authentication included. Without an API, data is saved in the browser (localStorage). You connect your own API; the documentation explains how.
• Light theme only. The mobile view is read-only.
• Drag and drop, range selection and resizing need a mouse, pen or touch; keyboard users do the same from the editor.
• All people and data in the demo are fictional.