Build an AI Scheduler in React—Automate Appointments & Save Time [Webinar Show Notes]
ChatGPT
Perplexity
Claude
GrokIn this webinar, Senior Product Manager Shriram showed attendees how to build an AI‑driven Scheduler app in React using the Syncfusion React Scheduler and Smart Paste components. They saw how natural‑language meeting details can be converted into structured calendar events, then saved into the Scheduler using Azure OpenAI.
If you missed the webinar or would like to watch it again, the recording is on our YouTube channel and embedded below.
What you’ll learn
- Set up a React and TypeScript project with Syncfusion® components and Tailwind.
- Install and render the JS 2 Scheduler; wire up data, views, and services.
- Add a dialog form for event creation.
- Use Smart Paste with field‑level instructions (data-smartpaste-description) to parse casual text.
- Connect to Azure OpenAI for chat completions that power Smart Paste.
- Submit and render events; show success feedback with Toast control.
Time stamps
- [00:00] Introduction
- [00:44] AI-ready toolkit overview (Smart Paste, Smart TextArea, AI AssistView)
- [02:24] What we’re building (natural-language → calendar event)
- [03:01] Prerequisites and project scaffold
- [04:11] Azure config and licensing; theme setup
- [05:22] Demo shell (tabs and content cards)
- [07:42] Install packages
- [11:17] Data source and render Scheduler
- [16:51] Azure OpenAI helper (client and request)
- [20:16] Dialog form and Smart Paste instructions
- [22:15] Dialog lifecycle (spinner, autopopulate)
- [23:11] Hook “Schedule appointment” buttons
- [26:24] Create and render events in Scheduler
- [30:10] Toast and tab refresh
- [31:55] Closing notes
Prerequisites
- Visual Studio Code
- Recent Node.js
- Latest React
- Access to Azure OpenAI (endpoint, API key, deployment, API version)
- A Syncfusion® license key.
Q&A
Q: In the case of Angular, how can I do that?
A: Try the Angular demo.
Q: Where can I find the documentation for the integration and an example code?
A: This is the React demo (Smart Event Window).
Closing notes
The code shown in this webinar included wiring the Smart Paste control to individual form fields with clear parsing instructions, then using Azure OpenAI to extract subject, location, and times from natural‑language input. Events were created and added to the Scheduler, with success feedback.