This demo shows how to connect DHTMLX Scheduler with Firebase Cloud Firestore to enable real-time updates and multi-user synchronization. When one user creates, edits, or deletes an event, the change is instantly reflected in other open browser tabs - no page reloads needed.
The setup makes it easy to build collaborative scheduling tools where multiple users can interact with the same calendar at the same time. Everything runs on the client side using Vanilla JS and Vite, with Firebase handling data storage and live updates.
- Realtime two-way sync - every Scheduler change is written to Firestore, every Firestore change is streamed back and patched into Scheduler.
- Zero-backend setup - pure frontend, Firebase hosts the database, websockets and auth tokens for you.
- Bulk first load, delta afterwards - fast initial
scheduler.parse(), then per-document updates viascheduler.ext.liveUpdates.
git clone https://github.com/DHTMLX/%REPO%.git
cd scheduler-firebase-realtime
npm i
cp .env.example .env # paste your Firebase keys
npm run devOpen http://localhost:5173 in two browser tabs and watch events propagate in real time.
-
Create a project in Firebase Console.
-
Create Firestore Database
-
Register the app
-
Paste Firebase configuration JSON into your .env file (see next section).
VITE_FIREBASE_CONFIGURATION={"apiKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","authDomain":"scheduler-firebase-demo-f9d89.firebaseapp.com","databaseURL":"https://scheduler-firebase-demo-f9d89.firebaseio.com","projectId":"scheduler-firebase-demo-f9d89","storageBucket":"scheduler-firebase-demo-f9d89.firebasestorage.app","messagingSenderId":"56800422361","appId":"1:56800422361:web:b773751740cd0dd948d1c8","measurementId":"G-T91CRYLQLR"}index.html
src/
├─ firebase.js
└─ main.js
.env.example
package.json
vite.config.jsnpm run dev - Vite dev-server (localhost:5173)
npm run build - Production build to /dist
npm run preview - Serve the built /dist locally
Deploy the finished bundle to Firebase Hosting:
npm i -g firebase-tools # once
firebase login
firebase init hosting # pick 'dist' as public folder
npm run build && firebase deploySource code in this repo is released under the MIT License.
DHTMLX Scheduler is a commercial library - use under a valid DHTMLX
license or evaluation agreement.
Using Firebase Firestore / Hosting is subject to Google's terms of service and billing. Stay within the free tier or set quotas.