All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        showCurrentTimeIndicator: true
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [showCurrentTimeIndicator]="true">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler :show-current-time-indicator="true"/>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    }
}
</script>
React
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.

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({ 
        // ...
        showCurrentTimeIndicator: true,
        shadeUntilCurrentTime: true
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [showCurrentTimeIndicator]="true"
    [shadeUntilCurrentTime]="true">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :show-current-time-indicator="true"
        :shade-until-current-time="true"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    }
}
</script>
React
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