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.
- 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. For Angular, AngularJS and Knockout apps, DevExtreme provides the dxTemplate markup component. The following code shows how to use dxTemplate to define templates for appointments.
- <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
- ],
- // ...
- })
If you use only jQuery, combine HTML markup for appointments manually with jQuery DOM manipulation methods. To apply this markup, use the appointmentTemplate callback function as shown in the following code.
- var 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")
- },
- // ...
- ];
- $(function () {
- $("#schedulerContainer").dxScheduler({
- dataSource: schedulerData,
- appointmentTemplate: function (model, index, element) {
- element.append("<i>" + model.appointmentData.movie + "</i>");
- element.append("<p>Price: $" + model.appointmentData.price + "</p>");
- }
- });
- });
You can also customize an individual appointment. For this purpose, declare a template for this appointment as a script and pass its id
to the template field of the appointment's data object.
- <script id="individualTemplate" type="text/html">
- <!-- ... -->
- </script>
- var schedulerData = [{
- movie: "Royal Wedding",
- startDate: new Date("2016-04-24T10:05:00.000Z"),
- endDate: new Date("2016-04-24T11:30:00.000Z"),
- template: $("#individualTemplate")
- }, {
- // ...
- }];
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.