AI integration

The AI feature and all its related components are marked as experimental and are subject to change.

The Calendar ships with an AI feature that lets users interact with events using natural language through a chat panel. Users can manage appointments, change views, filter events, and more — all using conversational commands.

The Calendar AI feature builds on top of the Scheduler AI feature. Please read both of these guides first:

Grid AI integration guide — covers setup, backend configuration, API plugins, custom tools, voice features, user settings, and more
Scheduler AI integration guide — covers event tools and the defaultRange config

All configurations described in those guides apply to the Calendar as well.

Minimum configuration

import { Calendar, OpenAIPlugin } from '@bryntum/calendar';

const calendar = new Calendar({
    features : {
        ai : {
            promptUrl  : '/api/ai/prompt',
            apiPlugin  : OpenAIPlugin,
            model      : 'gpt-4-1',
            chatButton : true
        }
    }
});

Additional tools

In addition to the Grid tools and most Scheduler tools, the Calendar adds view-specific tools:

Tool	Description
`changeView`	Switches between calendar views
`changeDate`	Changes the active date

Note that the Scheduler tools changeTimeSpan and scrollToDate are not available in the Calendar.

The base tools (changeTheme, askUser, createPlan, completePlanSteps, undo, endVoiceConversation) are also available. See the Grid AI guide for details on planning and base tools.

Date range scope

The Scheduler defaultRange config accepts three values — 'timeline', 'in-view', and 'all'. In the Calendar, only 'timeline' and 'all' are supported.

Event highlighting

When the AI responds with a message that references specific events, the Calendar highlights those events using the highlightEvents() method. Highlighted events remain fully opaque while the rest fade to 20% opacity, and the highlight survives view switches and date navigation. When the next prompt is sent (or the chat panel is closed), unhighlightEvents() is called to clear it.

You can also drive these methods directly from your own code to highlight events in response to any action:

// Highlight by id, record, or matching function
calendar.highlightEvents({ events : [1, 2, 3] });

// Clear any active highlight
calendar.unhighlightEvents();

This replaces the previous behavior where the AI used event selection to draw attention to referenced events.

API docs

Demo

AI Pest Control — Calendar with AI and custom training data