Introduction
Bryntum components are data-driven by design—data is not just an enhancement, it is a core requirement. Whether you're rendering a Scheduler, Gantt chart, or Grid, each component depends on well-structured data to function correctly.
This guide serves as an introduction to Bryntum’s data management concepts, helping you understand the underlying data structures, loading mechanisms, and integration strategies needed to build functional and efficient applications.
Let's start by exploring the two main sources of data:
- Inline data
- Remote data
Inline data
The easiest way to feed data into your Bryntum Calendar is by using inline data. Just as HTML allows inline CSS, you can include the data directly inside the new Calendar({}) instance. Here's how to do it:
new Calendar({
// other configs
events : [
{
id : 1,
startDate : "2020-10-11T14:00:00",
endDate : "2020-10-18T12:00:00",
name : "Hackathon 2020",
allDay : true,
resourceId : "bryntum",
eventColor : "green"
},
{
id : 2,
startDate : "2020-10-11T14:00:00",
endDate : "2020-10-11T18:00:00",
name : "Check-In in Hotel",
resourceId : "hotel"
},
{
id : 3,
startDate : "2020-10-11T18:00:00",
endDate : "2020-10-11T20:00:00",
name : "Relax and official arrival beer",
allDay : true,
resourceId : "michael"
}
],
resources: [
{
id : "bryntum",
name : "Bryntum team",
eventColor : "blue"
},
{
id : "hotel",
name : "Hotel Park",
eventColor : "orange"
},
{
id : "michael",
name : "Michael Johnson",
eventColor : "deep-orange"
}
]
})
new Calendar({
project : {
events : [
{
id : 1,
startDate : "2020-10-11T14:00:00",
endDate : "2020-10-18T12:00:00",
name : "Hackathon 2020",
allDay : true,
resourceId : "bryntum",
eventColor : "green"
},
{
id : 2,
startDate : "2020-10-11T14:00:00",
endDate : "2020-10-11T18:00:00",
name : "Check-In in Hotel",
resourceId : "hotel"
},
{
id : 3,
startDate : "2020-10-11T18:00:00",
endDate : "2020-10-11T20:00:00",
name : "Relax and official arrival beer",
allDay : true,
resourceId : "michael"
},
],
resources : [
{
id : "bryntum",
name : "Bryntum team",
eventColor : "blue"
},
{
id : "hotel",
name : "Hotel Park",
eventColor : "orange"
},
{
id : "michael",
name : "Michael Johnson",
eventColor : "deep-orange"
}
]
}
// other configs
});
const App = props => {
const [resource, setResources] = useState([
{
id : "bryntum",
name : "Bryntum team",
eventColor : "blue"
},
{
id : "hotel",
name : "Hotel Park",
eventColor : "orange"
},
{
id : "michael",
name : "Michael Johnson",
eventColor : "deep-orange"
}
]);
const [events, setEvents] = useState([
{
id : 1,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-18T12:00:00",
name : "Hackathon 2025",
allDay : true,
resourceId : "bryntum",
eventColor : "green"
},
{
id : 2,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-11T18:00:00",
name : "Check-In in Hotel",
resourceId : "hotel"
},
{
id : 3,
startDate : "2025-10-11T18:00:00",
endDate : "2025-10-11T20:00:00",
name : "Relax and official arrival beer",
allDay : true,
resourceId : "michael"
}
]);
return <BryntumCalendar resources={resources} events={events} />
}
<bryntum-calendar :resources="resources" :events="events" />
<script setup>
{/* other config */}
const
resources = reactive([
{
id : "bryntum",
name : "Bryntum team",
eventColor : "blue"
},
{
id : "hotel",
name : "Hotel Park",
eventColor : "orange"
},
{
id : "michael",
name : "Michael Johnson",
eventColor : "deep-orange"
}
]),
events = reactive([
{
id : 1,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-18T12:00:00",
name : "Hackathon 2025",
allDay : true,
resourceId : "bryntum",
eventColor : "green"
},
{
id : 2,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-11T18:00:00",
name : "Check-In in Hotel",
resourceId : "hotel"
},
{
id : 3,
startDate : "2025-10-11T18:00:00",
endDate : "2025-10-11T20:00:00",
name : "Relax and official arrival beer",
allDay : true,
resourceId : "michael"
}
])
</setup>
<bryntum-calendar [resources]="resources" [events]="events"></bryntum-calendar>
@Component()
export class AppComponent {
resources = [
{
id : "bryntum",
name : "Bryntum team",
eventColor : "blue"
},
{
id : "hotel",
name : "Hotel Park",
eventColor : "orange"
},
{
id : "michael",
name : "Michael Johnson",
eventColor : "deep-orange"
}
];
events = [
{
id : 1,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-18T12:00:00",
name : "Hackathon 2025",
allDay : true,
resourceId : "bryntum",
eventColor : "green"
},
{
id : 2,
startDate : "2025-10-11T14:00:00",
endDate : "2025-10-11T18:00:00",
name : "Check-In in Hotel",
resourceId : "hotel"
},
{
id : 3,
startDate : "2025-10-11T18:00:00",
endDate : "2025-10-11T20:00:00",
name : "Relax and official arrival beer",
allDay : true,
resourceId : "michael"
}
];
}
The above config results in the following Calendar:
Remote data
Remote data can come from a static .json file hosted on a web server (e.g., in the /public folder of your project or on a CDN), or it can be retrieved dynamically from a server through an API call (e.g., data.php).
If you have a /data.php endpoint, you can access the data as follows:
new Calendar({
crudManager : {
loadUrl : '/data.php',
autoLoad : true // auto load on initialization
}
})
// CalendarConfig.tsx
import { BryntumCalendarProps } from "@bryntum/calendar-react";
const calendarProps: BryntumCalendarProps = {
// other config
crudManager : {
transport : {
loadUrl : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
},
autoLoad : true // auto load on initialization
}
};
export { calendarProps };
import { calendarProps } from "./calendarProps";
// App.tsx
const App = props => {
return <BryntumCalendar {...calendarProps} />
}
<script setup lang="ts">
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
import { calendarConfig } from './AppConfig.ts';
</script>
<template>
<bryntum-calendar v-bind="calendarConfig" />
</template>
import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';
export const calendarConfig : BryntumCalendarProps = {
// other config
crudManager : {
transport : {
loadUrl : 'data.json' // can be replaced with an API endpoint (e.g. read.php)
},
autoLoad : true // auto load on initialization
}
};
<bryntum-gantt-project-model
#project
[startDate]="projectModelProps.startDate!"
[endDate]="projectModelProps.endDate!"
[calendar]="projectModelProps.calendar!"
[loadUrl]="projectModelProps.loadUrl!"
[autoLoad]="projectModelProps.autoLoad!"
></bryntum-gantt-project-model>
<bryntum-gantt
#gantt
[project]="project"
></bryntum-gantt>
// app.config.ts
import { BryntumGanttProjectModelProps } from '@bryntum/gantt-angular';
export const projectModelProps : BryntumGanttProjectModelProps = {
loadUrl : 'data.json', // can be replaced with an API endpoint (e.g. read.php)
autoLoad : true,
autoSetConstraints : true
};
// app.component.ts
import { projectModelProps } from './app.config';
export class AppComponent implements AfterViewInit {
public projectModelProps = projectModelProps;
}
The crudManager approach populates all stores in one request, reducing the API calls when loading the data. Take a look at the load request or response structure to understand how to work with the crudManager.
You can also use axios or fetch API:
async function loadData() {
const response = await fetch('backend/load.php');
return await response.json();
}
// Extract data from loadData() via `await` or `.then`
// Assuming it has been saved to `data`
const calendar = new Calendar({
crudManager : {
inlineData : data
}
})
// or
calendar.crudManager.inlineData = data;
Working with remote data is more complex as it offers multiple ways of interaction. Let's move on to the next topic to learn more about how stores work.
Continue reading: Understanding the Store