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.

App.js
  • 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.

CSS
  • #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:

App.js
  • 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;

View Demo

See Also