JavaScript/jQuery Scheduler - Timetable
The Scheduler UI component allows you to customize its timetable. You can specify the time period and a single cell's duration via the startDayHour, endDayHour, and cellDuration properties. Using the firstDayOfWeek property, you can define the weekday that is shown first.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Scheduler } from 'devextreme-react/scheduler';
- const dataSource = [{
- text: 'Website Re-Design Plan',
- startDate: new Date("2016-04-25T09:30:00.000Z"),
- endDate: new Date("2016-04-25T11:30:00.000Z")
- }, {
- text: 'Book Flights to San Fran for Sales Trip',
- startDate: new Date("2016-04-25T12:00:00.000Z"),
- endDate: new Date("2016-04-25T13:00:00.000Z")
- },
- // ...
- ];
- const currentDate = new Date(2016, 4, 25);
- class App extends React.Component {
- render() {
- return (
- <Scheduler
- dataSource={dataSource}
- defaultCurrentDate={currentDate}
- startDayHour={8}
- endDayHour={19}
- cellDuration={60}
- firstDayOfWeek={1}
- />
- );
- }
- }
- export default App;
You can also adjust cells' size in the table and around it using the DevExtreme CSS classes. For example, the .dx-scheduler-cell-sizes-horizontal
and .dx-scheduler-cell-sizes-vertical
classes specify the cells' width and height, respectively. These classes apply if the crossScrollingEnabled property is set to true.
- #yourSchedulerID .dx-scheduler-cell-sizes-horizontal {
- width: 200px;
- }
- #yourSchedulerID .dx-scheduler-cell-sizes-vertical {
- height: 200px;
- }
For a more detailed customization, define custom rendering functions for cells, time scales, and date scales. The following code shows how to define rendering functions for timetable parts:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Scheduler } from 'devextreme-react/scheduler';
- const currentDate = new Date(2016, 4, 24);
- class App extends React.Component {
- render() {
- return (
- <Scheduler
- dataSource={schedulerData}
- defaultCurrentDate={currentDate}
- showAllDayPanel={false}
- dataCellRender={this.renderDataCell}
- dateCellRender={this.renderDateCell}
- timeCellRender={this.renderTimeCell}
- defaultCurrentView="week"
- />
- );
- }
- renderDataCell(data, index) {
- return <div style={{ width: '100%', height: 40, backgroundColor: 'rgba(86, 202, 133, 0.1)' }}></div>;
- }
- renderDateCell(data, index) {
- return <b style={{ color: 'green', fontWeight: 'bold' }}><p>{data.text}</p></b>;
- }
- renderTimeCell(data, index) {
- return <b style={{ color: 'green', fontWeight: 'bold' }}><p>{data.text}</p></b>;
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.