JavaScript/jQuery Scheduler - Current Time Indication

The Scheduler displays a specific indicator that highlights the current time on a view by default. The indicator is available only on views containing the time scale.

Current Time Indicator

Use the showCurrentTimeIndicator property to control the indicator's visibility.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Scheduler } from 'devextreme-react/scheduler';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler showCurrentTimeIndicator={true}/>
  • );
  • }
  • }
  •  
  • export default App;

Additionally, you can apply shading to cover the timetable up to the current time by assigning true to the shadeUntilCurrentTime property.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Scheduler } from 'devextreme-react/scheduler';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • showCurrentTimeIndicator={true}
  • shadeUntilCurrentTime={true}
  • />
  • );
  • }
  • }
  •  
  • export default App;

View Demo

See Also