DevExtreme Angular - Overview

The Scheduler is a widget that represents scheduled data and allows a user to manage it.

View Demo

The following code adds the Scheduler widget to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define a date that should be displayed by default using the currentDate option.

HTML
TypeScript
  • <dx-scheduler
  • [dataSource]="appointments"
  • [currentDate]="currentDate">
  • </dx-scheduler>
  • import { DxSchedulerModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • appointments = [{
  • text: "Website Re-Design Plan",
  • startDate: new Date(2016, 4, 25, 1, 30),
  • endDate: new Date(2016, 4, 25, 3, 30)
  • }, {
  • text: "Book Flights to San Fran for Sales Trip",
  • startDate: new Date(2016, 4, 25, 9, 0),
  • endDate: new Date(2016, 4, 25, 10, 0)
  • },
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 25);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

Each data source object represents an appointment to be scheduled and has a special structure. This structure should be similar to the Default Appointment Template. Note that the fields listed below should be present in every appointment.

  • text
    The subject of an appointment.

  • startDate
    The start date of an appointment (includes time if needed).

  • endDate
    The end date of an appointment (includes time if needed).

If your appointments have a different structure, specify:

  • textExpr
    The data field that provides subjects for appointments.

  • startDateExpr
    The data field that provides start dates for appointments.

  • endDateExpr
    The data field that provides end dates for appointments.

HTML
TypeScript
  • <dx-scheduler
  • [dataSource]="appointments"
  • textExpr="subject"
  • startDateExpr="from"
  • endDateExpr="to"
  • [currentDate]="currentDate">
  • </dx-scheduler>
  • import { DxSchedulerModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • appointments = [{
  • subject: 'Meet with a customer',
  • from: new Date(2016, 4, 25, 1, 0),
  • to: new Date(2016, 4, 25, 3, 0)
  • }, {
  • subject: 'Discuss results',
  • from: new Date(2016, 5, 25, 9, 0),
  • to: new Date(2016, 4, 25, 10, 0)
  • },
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 25);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })
See Also