Angular 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.

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 property.

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