Skip to Content
🎉 The Gantt chart has landed. Explore the documentation and live demo →

The modern JavaScript event calendar

A modern JavaScript event calendar with the views, interactions, and framework integrations you need to move from prototype to production.

Get startedView on GitHub
React, Vue, Angular, SvelteResponsive by defaulti18n supportDrag and dropDark mode
Interactive demoBuilt with Schedule-X
Try dragging or resizing an event
AkzoNobel
European Commission
Octave
Dover corp
Bally's
Ohio State University
Keenfinity
iService
Status Hub

What developers are saying

Join thousands of developers who trust Schedule-X for their scheduling needs

Vukadin Nedeljkovic avatar

Vukadin Nedeljkovic

Team Lead

Schedule-X is great. Its flexibility and constant improvement distinguish it from similar community tools. Cudos to Tom who put in such effort and time to consider and discuss possible solutions.
Mike avatar

Mike

Co-Founder & CTO @ Zinya Global

We're using the premium version of Schedule-X and have nothing but good things to say. It meets all our needs for a resource scheduling component being both easy to work with, configurable, and extremely easy to integrate with the rest of our application. On top of this, customer support has been stellar.
For web devs

Ship a calendar in no time

Getting it right when building a calendar takes time. Schedule-X already has a lot of things figured out for you, so you can save yourself the months it would take to build a calendar from scratch.

Customizable

Customizable

Choose which views to display, set custom day boundaries or even write a plugin.

Drag and drop

Drag and drop

Reschedule events through a classic drag and drop.

Event resizing

Event resizing

Resize events by dragging the edges.

Dark mode

Dark mode

Built with light- and dark modes in mind. Toggle between them, simply by calling a method.

i18n

i18n

Supports multiple languages out of the box.

Responsive

Responsive

Works on all devices, from desktop to mobile

The all-inclusive way

Schedule-X Premium

Someone already took care of the complex details you need for an all-inclusive calendar experience. No need to build it yourself.

  • Build event modal- and form with recurrence options ~100 hours×
  • Build Drag-to-create ~40 hours×
  • Build Resource view ~100 hours×
  • Install and configure Schedule-X premium ~30 minutes✓
Schedule-X Cloud

End-to-End calendar in a few lines of code

Pair the Premium calendar UI with a fully managed backend for users, calendars, events, and two-way Google Calendar sync.

schedule-x-cloud / quickstart2 steps · TypeScript
1
Backend

Create a secure session

server.ts
  1. import { ScheduleXServerClient }
  2. from '@schedule-x-cloud/sdk/server'
  3.  
  4. const scheduleX =
  5. new ScheduleXServerClient({
  6. apiKey: process.env.CLOUD_API_TOKEN!,
  7. organizationId: process.env.CLOUD_ORG_ID!,
  8. })
  9.  
  10. app.post('/api/schedule-x/token', async (req, res) => {
  11. const session = await scheduleX.auth
  12. .createFrontendSession({
  13. externalUserId: req.user.id,
  14. })
  15.  
  16. res.json(session)
  17. })
2
Frontend

Render the synced calendar

calendar.ts
  1. import { createScheduleXCloudCalendar }
  2. from '@schedule-x-cloud/sdk'
  3.  
  4. const getFrontendToken = async () =>
  5. fetch('/api/schedule-x/token', {
  6. method: 'POST',
  7. })
  8. .then((response) =>
  9. response.json()
  10. )
  11. .then(({ token }) => token)
  12.  
  13. const calendar =
  14. createScheduleXCloudCalendar({
  15. getFrontendToken,
  16. initialProviderSync: true,
  17. })
  18.  
  19. calendar.render(
  20. document.getElementById('calendar')!
  21. )
Calendar connectedPremium UI, managed data, and Google Calendar stay in sync.
Explore Schedule-X Cloud →Read the quickstart