Angular Scheduler - Customize Appointment

For a minor customization of Scheduler appointments, you can define specific fields in appointment data objects. For example, the following code generates three appointments: the first is not customized, the second is hidden, and the third is disabled.

app.component.ts
app.component.html
  • import { DxSchedulerModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • appointments = [{
  • text: "Website Re-Design Plan",
  • startDate: new Date("2016-04-25T09:30:00.000Z"),
  • endDate: new Date("2016-04-25T11:30:00.000Z")
  • }, {
  • text: "Book Flights to San Fran for Sales Trip",
  • startDate: new Date("2016-04-25T12:00:00.000Z"),
  • endDate: new Date("2016-04-25T13:00:00.000Z"),
  • hidden: true
  • }, {
  • text: "Annual Meeting in Berlin",
  • startDate: new Date("2016-04-26T11:00:00.000Z"),
  • endDate: new Date("2016-04-26T13:00:00.000Z"),
  • disabled: true
  • }
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 25);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })
  • <dx-scheduler
  • [dataSource]="appointments"
  • [currentDate]="currentDate">
  • </dx-scheduler>

If you need a more flexible solution, define a custom template. The following code shows how to use dxTemplate to define templates for appointments.

app.component.html
app.component.ts
  • <dx-scheduler
  • [dataSource]="schedulerData"
  • appointmentTemplate="appointmentTemplate"
  • [currentDate]="currentDate">
  • <div *dxTemplate="let model of 'appointmentTemplate'">
  • <i>{{model.appointmentData.movie}}</i>
  • <p>Price: ${{model.appointmentData.price}}</p>
  • </div>
  • </dx-scheduler>
  • import { DxSchedulerModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • schedulerData = [{
  • movie: "His Girl Friday",
  • price: 5,
  • startDate: new Date("2016-04-24T09:10:00.000Z"),
  • endDate: new Date("2016-04-24T11:20:00.000Z")
  • }, {
  • movie: "Royal Wedding",
  • price: 10,
  • startDate: new Date("2016-04-24T10:05:00.000Z"),
  • endDate: new Date("2016-04-24T11:30:00.000Z")
  • },
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 24);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

View Demo

In addition, you can use a 3rd-party template engine to customize the UI component appearance. For more information, see the 3rd-Party Template Engines article.

See Also