JavaScript/jQuery Scheduler - views
Specifies and configures the views to be available in the view switcher.
This option 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 option to specify the view to which the configuration should apply. This documentation section describes available options. The options set for an individual view have a higher priority than the same options set on the root level for all views.
To specify the default view, use the currentView option.
Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.
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.
firstDayOfWeek
The first day of a week. Does not apply to the agenda view.
Use the FirstDayOfWeek enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday.
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 option'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".
name
A custom name for the view. This name goes to the view switcher.
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.
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
Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.