DHTMLX Event Calendar ⇄ Google Calendar Sync Demo

This demo shows the official way to connect DHTMLX Event Calendar with Google Calendar using a modern Node 20 + Vite stack.

Features

• Two-way sync - create, update, delete, or drag events in the widget and they are instantly reflected in Google Calendar (and vice‑versa on reload).
• OAuth 2.0 sign‑in with token refresh handled by Passport‑Google‑OAuth v3.
• Recurring events, all‑day - server‑side mapper converts Google's payloads to the shape Event Calendar expects.
• Clean separation of concerns - Express routes ⇢ services ⇢ mappers; front‑end calls a tiny REST API.
• Monorepo dev‑experience - Vite hot‑reload for the client, Nodemon for the server, single npm run dev.

Quick start

• Clone & install

git clone https://github.com/DHTMLX/event-calendar-google-sync.git
cd event-calendar-google-sync
npm i

• Configure (see below)

cp .env.example .env            # then edit values

• Start

npm run dev

• open http://localhost:5173

Setting up Google Calendar API

• Enable Calendar API in Google Cloud Console

• Create Auth2 Credentials and download JSON file. For this demo, the authorization redirect is set to http://localhost:3000/oauth2callback, and the authorized origin is http://localhost:3000/

• Set up the OAuth Consent screen

• The publishing status needs to be set to Testing for now, since the Production status requires the app to be verified by Google.

.env format

GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=xxxxxxxxxxxxxxxxxxxx
GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback
SESSION_SECRET=change‑me
PORT=3000

Repo structure (relevant bits)

client/                # Vite bundle
  ├─ index.ejs         # page layout
  └─ main.js           # Event Calendar setup and API wiring
server/
  ├─ config/           # env + passport setup
  ├─ routes/           # /auth  /api/calendars  /api/calendars/:id/events
  ├─ services/         # googleService.js (Calendar v3 wrapper)
  ├─ mappers/          # eventMapper.js (Google Events ⇄ DHX Events)
  └─ index.js          # Express entry

License

The code in this repository is released under the MIT License.

DHTMLX Event Calendar is a commercial library - use it under a valid license or evaluation agreement.

Access to the Google Calendar API is subject to Google's API Terms of Service. In production you may need to complete OAuth consent-screen verification and comply with Google API usage policies.

All other open‑source dependencies (Express, Vite, Passport, googleapis, axios, etc.) keep their original licenses.

Useful links

Google Calendar REST v3 docs

DHTMLX Event Calendar docs

Blog tutorial [COMING SOON]

DHTMLX Event Calendar product page

More Event Calendar samples

Technical support forum