JavaScript/jQuery Scheduler - views
Specifies and configures the views to be available in the view switcher.
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 which the configuration should apply. This documentation section describes available properties. The properties set for an individual view have a higher priority than the same properties set on the root level for all views.JavaScriptviews: [{ type: 'workWeek', name: 'Vertical Grouping', groupOrientation: 'vertical', cellDuration: 60, intervalCount: 2, }, { type: 'workWeek', name: 'Horizontal Grouping', groupOrientation: 'horizontal', cellDuration: 30, intervalCount: 2, }, 'agenda' ]
To specify the default view, use the currentView property.
agendaDuration
Specifies the number of dates that can be shown at a time in the agenda view.
appointmentCollectorTemplate
Specifies a custom template for cell overflow indicators in this view.
jQuery
$(function() {
$("#schedulerContainer").dxScheduler({
// ...
views: [{
// ...
appointmentCollectorTemplate: function(data, $indicatorElement) {
$indicatorElement.append(
// Custom jQuery elements go here
)
// ===== or =====
return /* your markup goes here */
}
},
// ...
]
});
});Angular
<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 { }Vue
<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>React
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;See Also
appointmentTemplate
| Name | Type | Description |
|---|---|---|
| appointmentData |
The appointment's data object. |
|
| targetedAppointmentData |
The appointment's data object. |
appointmentTooltipTemplate
Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator in this view.
| Name | Type | Description |
|---|---|---|
| appointmentData |
The appointment's data object. |
|
| targetedAppointmentData |
The appointment's data object. |
dateCellTemplate
See Also
dropDownAppointmentTemplate
Use the appointmentTooltipTemplate property instead.
Specifies a custom template for tooltips displayed when users click a cell overflow indicator in this view.
groupByDate
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".
groupOrientation
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.
See Also
intervalCount
Multiplies the default view interval. Applies to all view types except "agenda".
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
See Also
maxAppointmentsPerCell
Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".
scrolling
Scrolling allows a user to browse data outside the current viewport. Information about the available scrolling modes is in the mode property description.
See Also
startDate
Specifies the date from which to start counting the view interval. Applies to all view types except "agenda".