New: CalSync Server — self-hosted calendar infrastructure with multi-tenancy, WhatsApp & email notificationsLearn more
R
Built for React

The calendar component you'll actually ship with

The complete scheduling platform — a production-ready React calendar component and a self-hosted backend with multi-tenancy, Google + Outlook + CalDAV sync, and automated WhatsApp & email notifications.

7-day free trialNo credit cardOne-time purchaseTypeScript nativeSelf-hosted server included
App.tsx
import { CalendarApp } from '@calsync-react/calendar'

export default function App() {
  return (
    <CalendarApp
      licenseKey={process.env.NEXT_PUBLIC_KEY}
      locale="en"
      defaultView="week"
      preventOverlap
      onEventCreate={(e) => api.create(e)}
      onEventUpdate={(e) => api.update(e)}
      onEventDelete={(id) => api.delete(id)}
    />
  )
}

A full scheduling UI in 14 lines

npm i @calsync-react/calendar
4
View modes
Month · Week · Day · Year
10
Languages
Built-in i18n
3
Calendar syncs
Google · Outlook · CalDAV
3
Notification channels
Email · WhatsApp · Push
Tenants
Multi-tenant server

Features

Everything your scheduling UI needs

Stop rebuilding calendars from scratch. Ship a polished scheduling experience with a single React component.

Multi-Agenda

Color-coded schedules with toggle controls. Manage multiple calendars in one view.

Drag & Drop

Create by dragging, move and resize with native-feeling dnd-kit interactions.

Overlap Prevention

Collision detection prevents double-bookings. Toggle globally or per-agenda.

4 View Modes

Month, Week, Day, and Year — purpose-built with smooth transitions.

10 Languages

EN, FR, ES, DE, IT, PT, NL, JA, ZH, KO — built-in i18n, one prop to switch.

Instant Search

Full-text search across agendas and events with keyboard navigation.

TypeScript Native

Full type exports — CalendarEvent, Agenda, ViewType. Autocomplete everything.

Controlled & Uncontrolled

Zero-config localStorage or full state control. Your architecture, your choice.

One Dependency

Import, pass your key, done. All UI included — no extra installs.

Built for every industry

The ultimate scheduling solution,
for every use case

From solo practitioners to enterprise teams — CalSync powers scheduling across every vertical.

Healthcare & Medical

  • Patient appointment booking
  • Doctor availability rules
  • Multi-clinic scheduling
  • Appointment reminders via WhatsApp
  • HIPAA-friendly self-hosted

Finance & Banking

  • Advisor meeting scheduling
  • Client onboarding slots
  • Compliance audit calendars
  • Outlook + Teams sync
  • Tenant-isolated client data

Legal & Consulting

  • Client consultation booking
  • Court date management
  • Billable hour tracking
  • Multi-attorney calendars
  • Conflict detection

Education

  • Class & lecture scheduling
  • Student appointment booking
  • Teacher availability
  • Google Calendar sync
  • Multi-campus tenants

Field Services

  • Technician dispatch scheduling
  • Job site calendars
  • Equipment booking
  • SMS/WhatsApp job alerts
  • Resource management

Wellness & Beauty

  • Salon & spa bookings
  • Staff availability
  • Recurring appointments
  • Client reminder notifications
  • Multi-location support

Real Estate

  • Property viewing slots
  • Agent calendar management
  • Open house scheduling
  • Apple iCal sync
  • Automated viewing reminders

SaaS Platforms

  • Embed in your product
  • Multi-tenant per customer
  • White-label branding
  • REST API for integrations
  • Self-hosted = your data

Sync with any calendar

Google Calendar
Microsoft Outlook
Apple iCal
Fastmail
Nextcloud
Any CalDAV

Developer Experience

Designed for React developers

Props in, callbacks out. Controlled or uncontrolled — your choice. Full TypeScript support with zero config.

  • Controlled mode Pass events & agendas as props, handle mutations via callbacks
  • Uncontrolled mode Zero-config with built-in localStorage persistence
  • 16 callback props onCreate, onUpdate, onDelete, onViewChange, onDateChange…
  • Full type exports CalendarEvent, Agenda, ViewType, EventType — everything typed
Install
npm install @calsync-react/calendar
Controlled mode
const [events, setEvents] = useState([])

<CalendarApp
  events={events}
  onEventCreate={(e) => {
    setEvents(prev => [...prev, e])
    saveToDatabase(e)
  }}
  onEventUpdate={(e) =>
    setEvents(prev =>
      prev.map(x => x.id === e.id ? e : x)
    )
  }
/>

Pricing

Three plans. No subscriptions. Forever yours.

Each plan is sold separately. Pick what you need — no bundles, no per-seat fees.

Free Trial

Try the calendar component free for 7 days

€0/7 days
  • All views & features
  • Multi-agenda support
  • Drag & drop interactions
  • 1 project
  • Local development only
  • No credit card required
MOST POPULAR

Pro License

React calendar component — sold separately

€499/forever

Pay once. Use forever. Free updates.

  • React calendar component only
  • Up to 3 projects
  • All views, drag & drop, i18n
  • Overlap prevention
  • Domain-locked license key
  • Priority email support
  • Lifetime updates
SELF-HOSTED

Self-Hosted Server

Self-hosted backend server, sold separately

€699/forever

Backend server only. Does not include the calendar component.

  • Multi-tenant architecture
  • Google, Outlook & CalDAV sync
  • Email, WhatsApp & push notifications
  • Availability rules & time slots
  • Recurring events (RFC 5545 RRULE)
  • Resources, attendees & reminders
  • JWT auth + API keys + role system
  • 13 event types (medical, finance…)
  • Audit logs & branded emails
  • PostgreSQL, MySQL or MariaDB
  • Docker deployment ready
  • REST API — 10 route groups

Each plan is independent and sold separately. Buy Pro for the React calendar component. Buy Self-Hosted for the backend server. You can own both.

Ship your scheduling feature today

14 lines of code. One React component. A world-class calendar for your users.

No credit card required · 7-day trial · One-time payment