DevExtreme React - 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 option 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
    ],
    // ...
})

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

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
    ],
    // ...
})

View Demo

See Also