A scheduler is never just a calendar. The moment you ship one, you need drag & drop, resizing, recurring events, resources, and time zones — and each one is a project of its own.
Recurrence is where calendars go to die. RRULE expansion, exception dates, and DST transitions are notoriously easy to get subtly wrong — and users notice at 2 AM twice a year.
Established schedulers keep the views you actually need — resource columns and timelines — in their paid enterprise tiers, and drag & drop usually ships with no keyboard equivalent at all.
Your stack spans frameworks. A React calendar, a Vue calendar, and an Angular calendar from three vendors mean three APIs, three learning curves, and three sets of bugs.
Every view you need.
The same scheduler everywhere.
CoreUI Scheduler is a resource and time scheduler for JavaScript, React, Vue, and Angular. Every edition shares the same markup, the same class names, and one stylesheet — so a scheduler you build in React looks and behaves identically in Vue or Angular. Six views, RFC 5545 recurrence, DST-safe time handling, drag & drop with a full keyboard equivalent, and remote data are built in and TypeScript-typed.
Day, week, month with week-spanning bars, agenda, a resource view with a column per room or person, and a horizontal timeline — switchable at runtime.
Move, resize, and create by dragging — snapped to a configurable step, with a live ghost preview of exactly where the event will land, cancellable with Escape.
Events carry raw RFC 5545 RRULE strings. Expansion is windowed and DST-correct in any IANA time zone, powered by the Temporal API — no date library to ship.
Edit one occurrence, this-and-following, or the whole series — the scheduler handles exception dates, series splits, and shifts for you.
Route events to rooms, people, or machines. Columns virtualize past a dozen resources, and the timeline turns them into rows across a continuous multi-day axis.
Grab with Enter, move with arrows, confirm with Enter — every drag operation works without a pointer, satisfying WCAG 2.2 dragging movements out of the box.
Click any event for a focus-trapped modal with title, times, color, and repeat presets — plus an edit-scope selector for recurring series.
Shade non-working hours and days — and optionally enforce them, rejecting drops and resizes that land outside working time.
Turn off event overlap and the scheduler rejects colliding drops, resizes, and creations — announced to assistive technologies, scoped per resource.
Hand it a dataSource and events load per visible range as users navigate; every change persists to your API with automatic revert when the server says no.
Grids pan natively on touch devices; a long press engages drag & drop with the same snapping and preview as the pointer path.
Dates format through Intl; every label and announcement is overridable, with ready-made packs for seven languages shipped as a tree-shakeable subpath.
Every visual knob is a CSS variable resolving through CoreUI semantic tokens — light and dark mode follow your app automatically, with or without CoreUI.
ARIA grid semantics with row and column indexes, a roving-tabindex slot grid, live-region announcements for every operation, and a focus-contained dialog.
Every interactive element carries a stable data-part attribute, and one shared Playwright suite runs the same specs against all four editions.
Write it once.
Ship it anywhere.
The same events, the same options, the same change payloads — expressed in each framework's native syntax. Learn the scheduler once and reuse everything you know across JavaScript, React, Vue, and Angular.
import { Scheduler } from '@coreui/scheduler' import '@coreui/scheduler/dist/css/scheduler.css' new Scheduler(document.getElementById('scheduler'), { view: 'week', timeZone: 'Europe/Warsaw', events: [ { id: 'standup', title: 'Standup', start: '2026-09-07T09:00', end: '2026-09-07T09:15', rrule: 'FREQ=DAILY' }, ], })
import { CScheduler } from '@coreui/react-scheduler' export function Planner() { return ( <CScheduler view="week" timeZone="Europe/Warsaw" events={events} onEventChange={handleChange} /> ) }
<!-- <script setup> imports CScheduler from '@coreui/vue-scheduler' --> <CScheduler view="week" time-zone="Europe/Warsaw" :events="events" @event-change="onEventChange" />
<c-scheduler view="week" timeZone="Europe/Warsaw" [events]="events" (eventChange)="onEventChange($event)" />
Full API reference, options, events, and runnable examples for every edition.
The vanilla core — ES modules or a UMD bundle, no framework and no build step required.
A native <CScheduler> component — hooks-friendly, React 19-ready, at home in Next.js.
A Vue 3 component built for the Composition API, typed end to end.
A standalone <c-scheduler> component on signals for current Angular.
A scheduler that feels
like a real application.
Drag to reschedule, resize to adjust, click to edit, switch views — with the interactions your users already expect, rendered on the same fast, accessible core in every framework.
A live @coreui/scheduler instance — drag events between days, click one to edit it, or switch to the week and agenda views, running on this page.
One engine.
Four thin bindings.
All scheduling logic — the time model, recurrence expansion, event layout, and the interaction state machine — lives in a framework-free TypeScript core. Each edition is a thin rendering layer over it, so behavior can't drift between frameworks.
Recurrence keeps wall-clock time across daylight-saving transitions in any IANA zone, occurrences in the spring-forward gap shift with it, and durations stay real elapsed time — verified by a dedicated DST test pack.
The framework bindings aren't separate rewrites. They share the core's behavior, class names, and markup, so a fix or feature lands the same way in every edition.
- Six views — day, week, month, agenda, resources, and a horizontal timeline
- Drag & drop — move, resize, and create with snapping, a live ghost preview, and Escape to cancel
- Recurrence — raw RFC 5545 RRULE strings, exception dates, and windowed DST-safe expansion
- Edit scopes — this occurrence, this and following, or the whole series
- Resources — columns per room, person, or machine, virtualized past a dozen
- Edit dialog — title, times, color, repeat presets, and edit scope in a focus-trapped modal
- Business hours — shade non-working time, optionally reject operations outside it
- Overlap control — reject colliding drops, resizes, and creations per resource
- Remote data — per-range loading and persistence with automatic revert on failure
- Touch — native panning plus long-press drag with the same preview and snapping
- Keyboard — a full no-mouse path: create, move, resize, and delete from the keyboard
- Accessibility — ARIA grid semantics, live-region announcements, focus management
- Localization — Intl date formatting, overridable labels, seven ready-made language packs
- TypeScript — typed events, options, and change payloads across all four editions
Since 2013, CoreUI has been trusted by developers at the world's smartest companies
One license. Every framework.
Buy once and build with the JavaScript core and the React, Vue, and Angular editions — no per-framework lock-in. Get early access at the lowest price the Scheduler will ever have.
- All four editions — JavaScript, React, Vue, and Angular under one license
- Unlimited projects — build unlimited commercial and personal apps, no per-project fees
- Every feature — six views, recurrence, resources, drag & drop, remote data, and the timeline included
- TypeScript definitions — full typings for events, options, and change payloads
- Documentation & examples — a dedicated docs site per framework with runnable examples
- Updates & support — one year of updates and email support
CoreUI Scheduler is at version 0.1.0 — stable enough to build on today, but not yet 1.0. You get every edition and every feature right now, plus all upcoming features and fixes as they land. Until 1.0, expect occasional small breaking changes, always documented in the changelog with migration notes. In return, early access is the lowest price the Scheduler will ever have.
Four editions ship from one codebase: a vanilla JavaScript core plus React (CScheduler), Vue (CScheduler), and Angular (c-scheduler) bindings. They share the same markup, class names, and stylesheet, and one Playwright suite runs the same behavioral specs against all four.
Events carry raw RFC 5545 RRULE strings — any rule the standard allows is valid in the data model, with exception dates alongside. Occurrences are computed only for the visible range and keep their wall-clock time across DST transitions in the scheduler's IANA time zone. Editing one occurrence detaches it; edits can also apply to this-and-following or the whole series.
Accessibility is part of the contract, not an add-on: every drag operation has a keyboard equivalent (grab → arrows → confirm), operations are announced through a live region, the grid exposes ARIA row and column semantics, and the edit dialog traps focus. The no-mouse create → move → resize → delete scenario runs in CI on every build.
Yes. Hand the scheduler a dataSource and it loads events for the visible range as users navigate, and persists every drag, resize, edit, and delete to your API — reverting automatically when the server rejects a change. Or wire it manually through the change events.
About 66 KB minified and gzipped for the complete vanilla bundle — including the Temporal date engine, the RRULE recurrence engine, and resource virtualization. There is no separate date library to install or ship.
CoreUI Scheduler is a commercial CoreUI PRO product with its own documentation. A single license covers all four editions.