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.

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.fluent.blue.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.fluent.blue.light.css';

import { Scheduler } from 'devextreme-react/scheduler';

export default function App() {
    return (
        <Scheduler showCurrentTimeIndicator={true}/>
    );
}

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.fluent.blue.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.fluent.blue.light.css';

import { Scheduler } from 'devextreme-react/scheduler';

export default function App() {
    return (
        <Scheduler
            showCurrentTimeIndicator={true}
            shadeUntilCurrentTime={true}
        />
    );
}

View Demo

See Also