Your search did not match any results.
Scheduler

Current Time Indicator

Documentation

This example shows how to enable the current time indication. The switches under the Scheduler allow you to specify how to indicate the current time: by using a specific indicator, shading or both of them. You can also specify how often the Scheduler updates their position using the «Update position in» number box under the widget.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Scheduler, { Resource } from 'devextreme-react/scheduler'; import { Switch } from 'devextreme-react/switch'; import { NumberBox } from 'devextreme-react/number-box'; import { data, moviesData } from './data.js'; import AppointmentTemplate from './AppointmentTemplate.js'; const currentDate = new Date(); const views = ['week', 'timelineWeek']; class App extends React.Component { constructor(props) { super(props); this.state = { showCurrentTimeIndicator: true, shadeUntilCurrentTime: true, updateInterval: 10 }; this.onShowCurrentTimeIndicatorChanged = this.onShowCurrentTimeIndicatorChanged.bind(this); this.onShadeUntilCurrentTimeChanged = this.onShadeUntilCurrentTimeChanged.bind(this); this.onUpdateIntervalChanged = this.onUpdateIntervalChanged.bind(this); this.onContentReady = this.onContentReady.bind(this); } render() { return ( <React.Fragment> <Scheduler dataSource={data} views={views} defaultCurrentView={'week'} showCurrentTimeIndicator={this.state.showCurrentTimeIndicator} showAllDayPanel={false} shadeUntilCurrentTime={this.state.shadeUntilCurrentTime} defaultCurrentDate={currentDate} editing={false} height={600} appointmentRender={AppointmentTemplate} onContentReady={this.onContentReady} onAppointmentClick={this.onAppointmentClick} onAppointmentDblClick={this.onAppointmentDblClick} > <Resource dataSource={moviesData} fieldExpr={'movieId'} /> </Scheduler> <div className={'options'}> <div className={'column'}> <div className={'option'}> <div className={'label'}>Current time indicator </div> {' '} <div className={'value'}> <Switch id={'show-indicator'} value={this.state.showCurrentTimeIndicator} onValueChanged={this.onShowCurrentTimeIndicatorChanged} /> </div> </div> <div className={'option'}> <div className={'label'}>Shading until current time </div> {' '} <div className={'value'}> <Switch id={'allow-shading'} value={this.state.shadeUntilCurrentTime} onValueChanged={this.onShadeUntilCurrentTimeChanged} /> </div> </div> </div> {' '} <div className={'column'}> <div className={'option'}> <div className={'label'}>Update position in </div> {' '} <div className={'value'}> <NumberBox min={1} max={1200} value={this.state.updateInterval} step={10} showSpinButtons={true} width={100} format={'#0 s'} onValueChanged={this.onUpdateIntervalChanged} /> </div> </div> </div> </div> </React.Fragment> ); } onContentReady(e) { const currentHour = new Date().getHours() - 1; e.component.scrollToTime(currentHour, 30, new Date()); } onAppointmentClick(e) { e.cancel = true; } onAppointmentDblClick(e) { e.cancel = true; } onShowCurrentTimeIndicatorChanged(e) { this.setState({ showCurrentTimeIndicator: e.value }); } onShadeUntilCurrentTimeChanged(e) { this.setState({ shadeUntilCurrentTime: e.value }); } onUpdateIntervalChanged(args) { this.setState({ updateInterval: args.value }); } } export default App;
import React from 'react'; import Query from 'devextreme/data/query'; import { moviesData } from './data.js'; const getMovieById = function(id) { return Query(moviesData).filter(['id', id]).toArray()[0]; }; export default function AppointmentTemplate(data) { const movieInfo = getMovieById(data.movieId) || {}; return ( <div className={'movie'}> <img src={movieInfo.image} /> <div className={'movie-text'}>{movieInfo.text}</div> </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-scheduler-appointment { color: #000000; font-weight: 500; background-color: #e4e4e4; } .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content { padding: 5px 0px 5px 7px; } .options { background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .column { width: 40%; display: inline-block; margin: 15px 3%; text-align: left; vertical-align: top; } .option { padding: 5px 0; } .label, .value { display: inline-block; vertical-align: middle; } .label { width: 180px; } .value { width: 30%; } .movie img { height: 70px; } .movie-text { font-size: 90%; white-space: normal; } #allow-shading, #show-indicator { height: 36px; }
export const today = new Date(); today.setHours(0, 0, 0, 0); today.setDate(today.getDate() - today.getDay() + 3); export const data = [ { movieId: 1, startDate: new Date(today.getTime() - 113.5 * 3600000), endDate: new Date(today.getTime() - 111.5 * 3600000), recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15' }, { movieId: 2, startDate: new Date(today.getTime() - 110.5 * 3600000), endDate: new Date(today.getTime() - 108.5 * 3600000), recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15' }, { movieId: 3, startDate: new Date(today.getTime() - 106.5 * 3600000), endDate: new Date(today.getTime() - 104.5 * 3600000), recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15' }, { movieId: 4, startDate: new Date(today.getTime() - 104 * 3600000), endDate: new Date(today.getTime() - 102 * 3600000), recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15' }, { movieId: 5, startDate: new Date(today.getTime() - 101 * 3600000), endDate: new Date(today.getTime() - 99 * 3600000), recurrenceRule: 'FREQ=HOURLY;INTERVAL=15;COUNT=15' } ]; export const moviesData = [{ id: 1, text: 'His Girl Friday', image: '../../../../images/movies/HisGirlFriday.jpg' }, { id: 2, text: 'Royal Wedding', image: '../../../../images/movies/RoyalWedding.jpg' }, { id: 3, text: 'A Star Is Born', image: '../../../../images/movies/AStartIsBorn.jpg' }, { id: 4, text: 'The Screaming Skull', image: '../../../../images/movies/ScreamingSkull.jpg' }, { id: 5, text: 'It\'s a Wonderful Life', image: '../../../../images/movies/ItsAWonderfulLife.jpg' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });