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.
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.
appointmentCollectorComponent
An alias for the appointmentCollectorTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
appointmentCollectorRender
An alias for the appointmentCollectorTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
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.common.css';
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.common.css';
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
appointmentComponent
An alias for the appointmentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
appointmentRender
An alias for the appointmentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
appointmentTemplate
| Name | Type | Description |
|---|---|---|
| appointmentData |
The appointment's data object. |
|
| targetedAppointmentData |
The appointment's data object. |
appointmentTooltipComponent
An alias for the appointmentTooltipTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
appointmentTooltipRender
An alias for the appointmentTooltipTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
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. |
dataCellComponent
An alias for the dataCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
dataCellRender
An alias for the dataCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
dateCellComponent
An alias for the dateCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
dateCellRender
An alias for the dateCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
dateCellTemplate
See Also
dropDownAppointmentComponent
An alias for the dropDownAppointmentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
dropDownAppointmentRender
An alias for the dropDownAppointmentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
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".
resourceCellComponent
An alias for the resourceCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
resourceCellRender
An alias for the resourceCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
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".
timeCellComponent
An alias for the timeCellTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
timeCellRender
An alias for the timeCellTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
timeCellTemplate
See Also
type
If you have technical questions, please create a support ticket in the DevExpress Support Center.