RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Documentation/Guide/UI_Components/Scheduler/View_Switcher/ below:

Vue Scheduler - View Switcher

View switcher is a scheduler element used for quick switching between views.

To specify what views are available within the switcher, use the views property.

jQuery

$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        views: ['day', 'week', 'agenda']
    });
});

Angular

<dx-scheduler ...
    [views]="['day', 'week', 'agenda']">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Vue

<template>
    <DxScheduler
        :views="views"
    />
</template>

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

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            views: ['day', 'week', 'agenda']
        }
    }
}
</script>

React

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const views = ["day", "week", "agenda"];

class App extends React.Component {
    render() {
        return (
            <Scheduler views={views} />
        );
    }
}
export default App;

On mobile devices, the view switcher is displayed as a drop-down menu.

To use the drop-down menu on all types of devices, assign true to the useDropDownViewSwitcher property; to use tabs - assign false.

jQuery

$(function(){
    $("#schedulerContainer").dxScheduler({ 
        // ...
        useDropDownViewSwitcher: true
    });
});

Angular

<dx-scheduler ...
    [useDropDownViewSwitcher]="true">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Vue

<template>
    <DxScheduler
        :use-drop-down-view-switcher="true" />
</template>

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

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    }
}
</script>

React

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 useDropDownViewSwitcher={true} />
        );
    }
}
export default App;