@bryntum/calendar-react-thin
v7.2.2
Published
React wrappers for Bryntum Calendar JavaScript component
Readme
React wrapper for Bryntum Calendar Thin packages
This package contains a wrapper that encapsulates Bryntum Calendar and turns it into a React component, exposing configuration options, properties, features, and events.
Thin Package: This is a thin wrapper package designed for applications that use multiple Bryntum products. Thin packages exclude bundled dependencies to avoid duplication. For details, see React Multiple Products.
Version Requirement
- React:
18or higher - TypeScript:
4.2or higher - Vite
5or higher
Package Contents
| Path | Description |
|--------|------------------------------------------------|
| lib/ | React wrapper components (BryntumCalendar etc.) |
| src/ | Original source files |
Installation
React Wrapper
npm install @bryntum/calendar-react-thin@latestComponent Package (Required)
npm install @bryntum/calendar-thin@latestTry Bryntum Online Demos
Quick Start
Replace your App.tsx with the following:
import { FunctionComponent, useRef } from 'react';
import { BryntumCalendar } from '@bryntum/calendar-react';
import { calendarProps } from './CalendarConfig';
import './App.scss';
const App: FunctionComponent = () => {
const calendar = useRef<BryntumCalendar>(null);
return (
<BryntumCalendar
ref = {calendar}
{...calendarProps}
/>
);
};
export default App;Create a CalendarConfig.ts file in the src/ directory with the following content:
import { BryntumCalendarProps } from '@bryntum/calendar-react';
const calendarProps: BryntumCalendarProps = {
date : new Date(2026, 5, 7),
crudManager : {
transport : {
load : {
url : 'data.json'
}
},
autoLoad : true
}
};
export { calendarProps };Create a public/data/data.json file for example data and add the following JSON data to it:
{
"success": true,
"resources": {
"rows": [
{
"id": 1,
"name": "New York Team",
"eventColor": "blue"
},
{
"id": 2,
"name": "Tokyo Hub",
"eventColor": "green"
},
{
"id": 3,
"name": "Paris Office",
"eventColor": "orange"
},
{
"id": 4,
"name": "Sydney Crew",
"eventColor": "red"
}
]
},
"events": {
"rows": [
{
"id": 1,
"name": "Kickoff Strategy Meeting",
"startDate": "2026-06-08T09:00:00",
"endDate": "2026-06-08T12:30:00",
"resourceId": 1
},
{
"id": 2,
"name": "Client Review Call",
"startDate": "2026-06-09T14:00:00",
"endDate": "2026-06-09T17:00:00",
"resourceId": 1
},
{
"id": 3,
"name": "Design Workshop",
"startDate": "2026-06-10T10:00:00",
"endDate": "2026-06-10T15:00:00",
"resourceId": 1
},
{
"id": 4,
"name": "Project Planning",
"startDate": "2026-06-08T13:00:00",
"endDate": "2026-06-08T16:30:00",
"resourceId": 2
},
{
"id": 5,
"name": "Sprint Retrospective",
"startDate": "2026-06-09T15:00:00",
"endDate": "2026-06-09T19:00:00",
"resourceId": 2
},
{
"id": 6,
"name": "Innovation Lab Session",
"startDate": "2026-06-11T16:00:00",
"endDate": "2026-06-11T19:30:00",
"resourceId": 2
},
{
"id": 7,
"name": "UX/UI Review",
"startDate": "2026-06-09T08:30:00",
"endDate": "2026-06-09T11:00:00",
"resourceId": 3
},
{
"id": 8,
"name": "Marketing Sync",
"startDate": "2026-06-10T08:00:00",
"endDate": "2026-06-10T11:00:00",
"resourceId": 3
},
{
"id": 9,
"name": "Team Building Lunch",
"startDate": "2026-06-12T11:30:00",
"endDate": "2026-06-12T15:00:00",
"resourceId": 3
},
{
"id": 10,
"name": "Daily Standup",
"startDate": "2026-06-08T09:00:00",
"endDate": "2026-06-08T12:30:00",
"resourceId": 4
},
{
"id": 11,
"name": "Product Demo",
"startDate": "2026-06-10T16:00:00",
"endDate": "2026-06-10T20:00:00",
"resourceId": 4
},
{
"id": 12,
"name": "Customer Feedback Session",
"startDate": "2026-06-11T11:00:00",
"endDate": "2026-06-11T15:30:00",
"resourceId": 4
},
{
"id": 13,
"name": "End of Sprint Wrap-up",
"startDate": "2026-06-12T12:00:00",
"endDate": "2026-06-12T15:00:00",
"resourceId": 4
},
{
"id": 100,
"name": "Hackathon 2026",
"startDate": "2026-06-08T00:00:00",
"endDate": "2026-06-15T00:00:00",
"allDay": true,
"resourceId": 1,
"eventColor": "purple"
},
{
"id": 101,
"name": "Innovation Day",
"startDate": "2026-06-08T00:00:00",
"endDate": "2026-06-09T00:00:00",
"allDay": true,
"resourceId": 2
},
{
"id": 102,
"name": "Wellness Retreat",
"startDate": "2026-06-10T00:00:00",
"endDate": "2026-06-11T00:00:00",
"allDay": true,
"resourceId": 3
},
{
"id": 103,
"name": "Tech Expo Visit",
"startDate": "2026-06-11T00:00:00",
"endDate": "2026-06-12T00:00:00",
"allDay": true,
"resourceId": 4
},
{
"id": 104,
"name": "Team Celebration",
"startDate": "2026-06-13T00:00:00",
"endDate": "2026-06-14T00:00:00",
"allDay": true,
"resourceId": 1
}
]
}
}This is the data the Bryntum Calendar will use.
Project Structure
Product Dependencies
API packages:
{
"dependencies": {
"@bryntum/core-thin": "7.2.2",
"@bryntum/engine-thin": "7.2.2",
"@bryntum/grid-thin": "7.2.2",
"@bryntum/scheduler-thin": "7.2.2",
"@bryntum/calendar-thin": "7.2.2"
}
}Framework wrapper packages:
{
"dependencies": {
"@bryntum/core-react-thin": "7.2.2",
"@bryntum/calendar-react-thin": "7.2.2"
}
}Product Configuration
import { BryntumCalendarProps } from '@bryntum/calendar-react-thin';
const calendarProps : BryntumCalendarProps = {
// Calendar configuration
};Product Styling
SCSS/CSS:
/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/calendar-thin/calendar.css';
/* Theme */
@import '@bryntum/core-thin/svalbard-light.css';Product Localization
import '@bryntum/calendar-thin/lib/localization/De.js'Integration Guide
For details on installing and using this package, see the React Integration Guide.
Wrappers
React wrappers encapsulate Bryntum components as native React components, exposing all configuration options, properties, features, and events through React-familiar patterns like props and callbacks.
Visit Wrappers documentation for the complete list of available wrapper components.
Features
Features are optional modules that extend Bryntum Calendar functionality. Each feature is suffixed with Feature and
can be enabled and configured through standard React props.
Visit Features documentation for the complete list of available features and their configuration options.
Explore All Bryntum Products
- Bryntum Grid - High-performance data grid
- Bryntum Scheduler - Resource scheduling component
- Bryntum Scheduler Pro - Advanced scheduling with dependencies
- Bryntum Gantt - Project planning and management
- Bryntum Calendar - Full-featured calendar component
- Bryntum TaskBoard - Kanban-style task management
Explore our comprehensive collection of demos:
| Product | JavaScript | React | Vue | Angular | |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:| | Grid | Grid JavaScript demos | Grid React demos | Grid Vue demos | Grid Angular demos | | Scheduler | Scheduler JavaScript demos | Scheduler React demos | Scheduler Vue demos | Scheduler Angular demos | | Scheduler Pro | Scheduler Pro JavaScript demos | Scheduler Pro React demos | Scheduler Pro Vue demos | Scheduler Pro Angular demos | | Gantt | Gantt JavaScript demos | Gantt React demos | Gantt Vue demos | Gantt Angular demos | | Calendar | Calendar JavaScript demos | Calendar React demos | Calendar Vue demos | Calendar Angular demos | | TaskBoard | TaskBoard JavaScript demos | TaskBoard React demos | TaskBoard Vue demos | TaskBoard Angular demos |
Online references
License and copyright
This wrapper depends on Bryntum Calendar, which is commercial software and requires a paid license. Please visit the Bryntum Calendar End User License for the full text of the license.
Copyright © 2009-2026, Bryntum All rights reserved.