Hidden time ruler 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.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.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 } from 'react';
import JqxScheduler, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscheduler';
function App() {
const myScheduler = useRef<JqxScheduler>(null);
const source = useMemo(() => ({
dataFields: [
{ name: "id", type: "string" },
{ name: "status", type: "string" },
{ name: "about", type: "string" },
{ name: "address", type: "string" },
{ name: "company", type: "string" },
{ name: "name", type: "string" },
{ name: "style", type: "string" },
{ name: "calendar", type: "string" },
{ name: "start", type: "date", format: "yyyy-MM-dd HH:mm" },
{ name: "end", type: "date", format: "yyyy-MM-dd HH:mm" }
],
dataType: "json",
id: "id",
url: 'appointments.txt'
}), []);
const dataAdapter = useMemo(() => new jqx.dataAdapter(source), [source]);
const appointmentDataFields = useMemo(() => ({
description: "about",
from: "start",
id: "id",
location: "address",
resourceId: "calendar",
status: "status",
style: "style",
subject: "name",
to: "end"
}), []);
const date = useMemo(() => new jqx.date(2028, 11, 17), []);
const views = useMemo(() => [
{ type: "dayView", timeRuler: { hidden: true } },
{ type: "weekView", timeRuler: { hidden: true } }
], []);
return (
<JqxScheduler
theme="tailwind-blue-dark"
ref={myScheduler}
width="100%"
height={600}
date={date}
source={dataAdapter}
view="weekView"
views={views}
appointmentDataFields={appointmentDataFields}
/>
);
}
export default App;