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

Showing content from https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/ below:

Vue Scheduler - views | Vue Documentation

Specifies and configures the views to be available in the view switcher.

Selector: DxView

Default Value: ['day', 'week']

Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

This property accepts an array of strings and objects:

• String
  A view name. Use a string if the view does not need customization, but should be available in the view switcher.

• Object
  An individual view's configuration. Set the type property to specify the view to customize. Properties set for an individual view override their corresponding component configuration properties.

  views: [{
          type: 'workWeek',
          name: 'Vertical Grouping',
          groupOrientation: 'vertical',
          cellDuration: 60,
          intervalCount: 2,
      }, {
          type: 'workWeek',
          name: 'Horizontal Grouping',
          groupOrientation: 'horizontal',
          cellDuration: 30,
          intervalCount: 2,
      },
      'agenda'
  ]

  For more information about how to customize an individual view, refer to the following topic: Customize Individual Views.

To specify the default view, use the currentView property.

View Demo View on GitHub

Specifies the number of dates that can be shown at a time in the agenda view.

Selector: agenda-duration

Default Value: 7

Specifies the display mode for the All day panel.

Selector: all-day-panel-mode

Default Value: 'all'

View Demo

To hide the All day panel, set this property to hidden.

If you set the allDayPanelMode property to allDay, the All day panel displays only the appointments whose allDay property is set to true.

To also display appointments that have a duration equal to or more than 24 hours, assign all to this property.

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            type: 'week',
            name: 'Week',
            allDayPanelMode: 'all',
        }, 
        // ...
        ],            

    });
});

<dx-scheduler ... >
    <dxi-view type="week" allDayPanelMode="all" name="Week">
    </dxi-view>
</dx-scheduler>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxScheduler ...>
        <DxView
            type="week"
            name="Week"
            all-day-panel-mode="all"
        />
    </DxScheduler>
</template>

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

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

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 ...>
                <View
                    type="week"
                    name="Week"
                    allDayPanelMode="all"
                />                    
            </Scheduler>
        );
    }
}

export default App;

Specifies a custom template for cell overflow indicators in this view.

Selector: appointment-collector-template

Default Name: 'appointmentCollector'

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            // ...
            appointmentCollectorTemplate: function(data, $indicatorElement) {
                $indicatorElement.append(
                    // Custom jQuery elements go here
                )
                // ===== or =====
                return /* your markup goes here */
            }
        },
        // ...
        ]
    });
});

<dx-scheduler ... >
    <dxi-view ...
        appointmentCollectorTemplate="myTemplate">
    </dxi-view>
    <div *dxTemplate="let data of 'myTemplate'">
        <!-- your markup goes here -->
    </div>
</dx-scheduler>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxScheduler ... >
        <DxView ...
            appointment-collector-template="myTemplate"
        />
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
    </DxScheduler>
</template>

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

import { DxScheduler, DxView } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';

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

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

const renderCellOverflowIndicator = (data) => {
    return (
        {/* your markup goes here */}
    );
}

class App extends React.Component {
    render() {
        return (
            <Scheduler ... >
                <View ...
                    appointmentCollectorRender={renderCellOverflowIndicator}
                />
            </Scheduler>
        );
    }
}

export default App;

• appointmentCollectorTemplate

Specifies a custom template for appointments.

Selector: appointment-template

Default Name: 'item'

Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator in this view.

Selector: appointment-tooltip-template

dxSchedulerAppointment

The appointment's data object.

dxSchedulerAppointment

The clicked appointment's data object.

Boolean

Specifies whether you click a button or an appointment element.

Default Name: 'appointmentTooltip'

The cell duration in minutes.

Selector: cell-duration

Default Value: 30

View Demo

Specifies a custom template for table cells.

Selector: data-cell-template

Object

The current table cell's data.

Default Name: null

Specifies a custom template for date scale items.

Selector: date-cell-template

Object

The data of the current date scale item.

Default Name: null

Use the appointmentTooltipTemplate property instead.

Specifies a custom template for tooltips displayed when users click a cell overflow indicator in this view.

Selector: drop-down-appointment-template

Object

The appointment's object.

Default Name: 'dropDownAppointment'

Specifies the last hour on the view's time scale. Accepts integer values from 0 to 24.

Selector: end-day-hour

Default Value: 24

View Demo

The first day of a week. Does not apply to the agenda view.

Selector: first-day-of-week

Default Value: undefined

If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal".

Selector: group-by-date

Default Value: false

Arranges resource headers vertically (in a column) or horizontally (in a row).

Selector: group-orientation

This property's default value depends on the view type. The following list illustrates the dependency:

• "horizontal"
  For the day, month, week, and workWeek view types.

• "vertical"
  For the timelineDay, timelineMonth, timelineWeek, and timelineWorkWeek view types. For the agenda, resource headers are always organized vertically.

View Demo

• Group Appointments by Resources

The resource kinds by which appointments are grouped.

Multiplies the default view interval. Applies to all view types except "agenda".

Selector: interval-count

Default Value: 1

The following is a list of views and their default intervals:

• "day", "timelineDay" - a day
• "week", "timelineWeek" - a week
• "workWeek", "timelineWorkWeek" - a week without weekends
• "month" - a month

View Demo

• agendaDuration

Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".

Selector: max-appointments-per-cell

Default Value: 'auto'

View Demo

Specifies the minute offset within the view indicating the starting point of a day.

This property moves the interval between startDayHour and endDayHour. The offset is a multiple of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours). For instance, if the following is true:

• The offset is set to 240.

• startDayHour is 0 (default).

• endDayHour is 24 (default).

Then, the day starts and ends at 04:00 AM instead of 00:00.

You can combine this property with different values of startDayHour, endDayHour, and cellDuration to get the desired result. For example, the following code snippet uses all these properties, and as a result, the day starts at 4:40 AM and ends at 12:00 PM.

$(() => {
    $('#scheduler').dxScheduler({
        // ...
        views: [
            {
                type: 'workWeek',
                offset: -20,
                startDayHour: 5,
                endDayHour: 12,
                cellDuration: 40,
            }
        ]
    });
});

<dx-scheduler ... >
    <dxi-view ...
        type="workWeek"
        [offset]="-20"
        [startDayHour]="5"
        [endDayHour]="12"
        [cellDuration]="40"
    >
    </dxi-view>
</dx-scheduler>

<template>
    <DxScheduler ... >
        <DxView
            type="workWeek"
            offset="-20"
            start-day-hour="5"
            end-day-hour="12"
            cell-duration="40" 
        />
    </DxScheduler>
</template>

<script>
// ...
</script>

// ...
export default function App() {
    return (
        <Scheduler ... >
            <View
                type="workWeek"
                offset="-20"
                startDayHour="5"
                endDayHour="12"
                cellDuration="40"
            />
        </Scheduler>
    )
}

This property has no effect on the agenda view.

View Demo

Specifies a custom template for resource headers.

Selector: resource-cell-template

Object

The current resource header's data.

Default Name: null

Configures scrolling for a view.

Selector: DxScrolling

Type: dxSchedulerScrolling

Specifies the date from which to start counting the view interval. Applies to all view types except "agenda".

Selector: start-date

Default Value: undefined

Specifies the first hour on the view's time scale. Accepts integer values from 0 to 24.

Selector: start-day-hour

Default Value: 0

View Demo

Specifies a custom template for time scale items.

Selector: time-cell-template

Object

The data of the current time scale item.

Default Name: null

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4