Vue 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.common.css';
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.common.css';
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.common.css';
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.common.css';
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