Quickstart Without Calendar Sync

Use this setup when Schedule-X Cloud will store your calendars and events, but your users will not connect Google Calendar. Your backend provisions native calendars; the browser receives a short-lived frontend token and renders the Cloud-backed calendar.

1. Get An Organization API Token

Email tom@schedule-x.dev and ask for a Schedule-X Cloud organization API token.

SCHEDULE_X_ORGANIZATION_ID=<organization-id>
SCHEDULE_X_ORG_API_TOKEN=sx_org_...

Keep the organization API token on your backend. Never expose it in browser code, mobile clients, logs, analytics events, or public repositories.

2. Install

npm install @schedule-x-cloud/sdk temporal-polyfill @schedule-x/calendar @schedule-x/calendar-controls @schedule-x/event-recurrence @schedule-x/theme-default @schedule-x/translations @sx-premium/interactive-event-modal @sx-premium/sidebar

3. Provision A Native Calendar

Create the calendars your organization needs from trusted backend code. This is provisioning code, not something to repeat whenever a user requests a frontend token.

import { ScheduleXServerClient } from '@schedule-x-cloud/sdk/server'

const scheduleX = new ScheduleXServerClient({
  apiKey: process.env.SCHEDULE_X_ORG_API_TOKEN!,
  organizationId: process.env.SCHEDULE_X_ORGANIZATION_ID!,
})

await scheduleX.calendars.create(
  process.env.SCHEDULE_X_ORGANIZATION_ID!,
  {
    name: 'Work',
    slug: 'work',
    colorName: 'work',
  }
)

Native calendars are available according to the user’s organization role. Cloud assigns a complete light and dark color palette when you omit explicit colors.

4. Add The Backend Token Endpoint

Call createFrontendSession() only after your application has authenticated the request. externalUserId is the stable user ID from your application—not a value accepted from an untrusted request body.

app.post('/api/schedule-x/token', requireUser, async (req, res) => {
  res.json(await scheduleX.auth.createFrontendSession({
    externalUserId: req.user.id,
    email: req.user.email,
    displayName: req.user.name,
  }))
})

The first call creates the Schedule-X Cloud user and Member membership. Later calls update the email and display name, preserve the role, and issue a fresh one-hour frontend token. You do not need to store the returned Cloud user ID.

5. Render The Frontend Calendar

import 'temporal-polyfill/global'
import '@schedule-x/theme-default/dist/index.css'
import '@sx-premium/interactive-event-modal/index.css'
import '@sx-premium/sidebar/index.css'
import { createScheduleXCloudCalendar } from '@schedule-x-cloud/sdk'

const calendarApp = createScheduleXCloudCalendar({
  getFrontendToken: async () => {
    const response = await fetch('/api/schedule-x/token', { method: 'POST' })
    return (await response.json()).token
  },
})

calendarApp.render(document.getElementById('calendar')!)

createScheduleXCloudCalendar() shows a loading overlay until the first visible range is available. It retains existing events during later range refreshes, persists event changes, listens for Cloud updates, and requests a fresh token after a 401 before retrying once.

Pass the same calendarApp to the existing React, Vue, Angular, or Svelte Schedule-X component instead of calling render() yourself.

For calendar provisioning and lower-level event calls, see Core Workflows.