The resources in React Scheduler.
A live React example of jqxScheduler, the jQWidgets Scheduler component, with its complete source code below. It is one of 33 jqxScheduler demos for React.
appointmentDataFields property – Sets or gets the appointments data fields.date property – Sets or gets the Scheduler's Date.height property – Sets or gets the Scheduler's height.ready property – Sets a function called when the Scheduler is rendered and ready for usage.resources property – Sets or gets the Scheduler's resource object.showLegend property – Sets or gets whether the Scheduler's legend bar is displayed.source property – Sets or gets the Scheduler appointments data source.theme property – Sets the widget's theme.views property – Sets or gets the Scheduler's views.view property – Sets or gets the Scheduler's view.width property – Sets or gets the Scheduler's width.ensureAppointmentVisible method – Scrolls to an appointment if it is out of the visible area.To run it in your own app, install the package with npm install jqwidgets-scripts, add these files to a Vite React and TypeScript project, and import jqx.base.css and a theme in main.tsx. Getting started with jqxScheduler shows the setup step by step.
import { useRef, useMemo, useCallback } from 'react';
import JqxScheduler, { type ISchedulerProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
interface Appointment {
calendar: string;
description: string;
end: Date;
id: string;
location: string;
start: Date;
subject: string;
}
function App() {
const myScheduler = useRef<JqxScheduler>(null);
const appointments: Appointment[] = useMemo(
() => [
{
calendar: 'Room 1',
description: 'George brings projector for presentations.',
end: new Date(2026, 10, 19, 16, 0, 0),
id: 'id1',
location: '',
start: new Date(2026, 10, 19, 9, 0, 0),
subject: 'Quarterly Project Review Meeting',
},
{
calendar: 'Room 2',
description: '',
end: new Date(2026, 10, 20, 15, 0, 0),
id: 'id2',
location: '',
start: new Date(2026, 10, 20, 10, 0, 0),
subject: 'IT Group Mtg.',
},
{
calendar: 'Room 1',
description: '',
end: new Date(2026, 10, 23, 13, 0, 0),
id: 'id3',
location: '',
start: new Date(2026, 10, 23, 11, 0, 0),
subject: 'Course Social Media',
},
{
calendar: 'Room 2',
description: '',
end: new Date(2026, 10, 21, 23, 59, 59),
id: 'id4',
location: '',
start: new Date(2026, 10, 19, 0, 0, 0),
subject: 'New Projects Planning',
},
{
calendar: 'Room 1',
description: '',
end: new Date(2026, 10, 21, 17, 0, 0),
id: 'id5',
location: '',
start: new Date(2026, 10, 21, 15, 0, 0),
subject: 'Interview with James',
},
{
calendar: 'Room 2',
description: '',
end: new Date(2026, 10, 22, 16, 0, 0),
id: 'id6',
location: '',
start: new Date(2026, 10, 22, 14, 0, 0),
subject: 'Interview with Nancy',
},
],
[]
);
const source = useMemo(
() => ({
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'location', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' },
],
dataType: 'array',
id: 'id',
localData: appointments,
}),
[appointments]
);
const dataAdapter = useMemo(() => new jqx.dataAdapter(source), [source]);
const appointmentDataFields = useMemo(
() => ({
description: 'description',
from: 'start',
id: 'id',
location: 'location',
resourceId: 'calendar',
subject: 'subject',
to: 'end',
}),
[]
);
const resources = useMemo<ISchedulerProps['resources']>(
() => ({
colorScheme: 'scheme05',
dataField: 'calendar',
orientation: 'horizontal',
source: new jqx.dataAdapter(source),
}),
[source]
);
const views = useMemo(
() => [
{ type: 'dayView', showWeekends: false },
{ type: 'weekView', showWeekends: false },
{ type: 'monthView' },
],
[]
);
const date = useMemo(() => new jqx.date(2026, 11, 19), []);
const ready = useCallback(() => {
setTimeout(() => {
myScheduler.current?.ensureAppointmentVisible('id1');
myScheduler.current?.render();
});
}, []);
return (
<JqxScheduler
theme="tailwind-blue-dark"
ref={myScheduler}
width="100%"
height={600}
date={date}
source={dataAdapter}
showLegend={true}
view="weekView"
appointmentDataFields={appointmentDataFields}
resources={resources}
views={views}
ready={ready}
/>
);
}
export default App;