DevExtreme jQuery - Customize Appointment
For a minor customization of Scheduler appointments, you can use the default appointment template. This template defines the appearance of an appointment depending on whether specific fields are present or absent in the appointment data object. For example, the following code generates three appointments: the first is not customized, the second is hidden, and the third is disabled.
jQuery
var appointments = [{
text: "Website Re-Design Plan",
startDate: new Date(2016, 4, 25, 9, 30),
endDate: new Date(2016, 4, 25, 11, 30)
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: new Date(2016, 4, 25, 12, 0),
endDate: new Date(2016, 4, 25, 13, 0),
hidden: true
},
// ...
];
$(function () {
$("#schedulerContainer").dxScheduler({
dataSource: appointments,
currentDate: new Date(2016, 4, 25)
});
});Angular
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
appointments = [{
text: "Website Re-Design Plan",
startDate: new Date(2016, 4, 25, 9, 30),
endDate: new Date(2016, 4, 25, 11, 30)
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: new Date(2016, 4, 25, 12, 0),
endDate: new Date(2016, 4, 25, 13, 0),
hidden: true
},
// ...
];
currentDate = new Date(2016, 4, 25);
}
@NgModule({
imports: [
// ...
DxSchedulerModule
],
// ...
})
<dx-scheduler
[dataSource]="appointments"
[currentDate]="currentDate">
</dx-scheduler>Using the default appointment template is the easiest way to customize an appointment, but it lacks flexibility. Instead, you can define a custom template. For Angular, AngularJS and Knockout apps, DevExtreme provides a markup component called dxTemplate. The following code shows how you can use dxTemplate to define templates for appointments.
Angular
<dx-scheduler
[dataSource]="schedulerData"
appointmentTemplate="appointmentTemplate"
[currentDate]="currentDate">
<div *dxTemplate="let appointment of 'appointmentTemplate'">
<i>{{appointment.movie}}</i>
<p>Price: ${{appointment.price}}</p>
</div>
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
schedulerData = [{
movie: "His Girl Friday",
price: 5,
startDate: new Date(2016, 4, 24, 9, 10),
endDate: new Date(2016, 4, 24, 11, 20)
}, {
movie: "Royal Wedding",
price: 10,
startDate: new Date(2016, 4, 24, 10, 5),
endDate: new Date(2016, 4, 24, 11, 30)
},
// ...
];
currentDate = new Date(2016, 4, 24);
}
@NgModule({
imports: [
// ...
DxSchedulerModule
],
// ...
})AngularJS
<div ng-controller="DemoController">
<div dx-scheduler="{
dataSource: schedulerData,
appointmentTemplate: 'appointment',
currentDate: currentDate,
}" dx-item-alias="item">
<div data-options="dxTemplate: { name: 'appointment' }">
<i>{{item.movie}}</i>
<p>Price: ${{item.price}}</p>
</div>
</div>
</div>angular.module('DemoApp', ['dx'])
.controller('DemoController', function DemoController($scope) {
$scope.schedulerData = [{
movie: "His Girl Friday",
price: 5,
startDate: new Date(2016, 4, 24, 9, 10),
endDate: new Date(2016, 4, 24, 11, 20)
}, {
movie: "Royal Wedding",
price: 10,
startDate: new Date(2016, 4, 24, 10, 05),
endDate: new Date(2016, 4, 24, 11, 30)
},
// ...
];
$scope.currentDate = new Date(2016, 4, 24);
});dx-item-alias directive specifies the variable that is used to access the item object.Knockout
<div data-bind="dxScheduler: {
dataSource: schedulerData,
appointmentTemplate: 'appointment',
currentDate: currentDate
}">
<div data-options="dxTemplate: { name: 'appointment' }">
<i data-bind="text: movie"></i>
<p>Price: $<span data-bind="text: price"></span></p>
</div>
</div>var viewModel = {
schedulerData: [{
movie: "His Girl Friday",
price: 5,
startDate: new Date(2016, 4, 24, 9, 10),
endDate: new Date(2016, 4, 24, 11, 20)
}, {
movie: "Royal Wedding",
price: 10,
startDate: new Date(2016, 4, 24, 10, 05),
endDate: new Date(2016, 4, 24, 11, 30)
},
// ...
],
currentDate: new Date(2016, 4, 24)
};
ko.applyBindings(viewModel);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, 4, 24, 9, 10),
endDate: new Date(2016, 4, 24, 11, 20)
}, {
movie: "Royal Wedding",
price: 10,
startDate: new Date(2016, 4, 24, 10, 05),
endDate: new Date(2016, 4, 24, 11, 30)
},
// ...
];
$(function () {
$("#schedulerContainer").dxScheduler({
dataSource: schedulerData,
appointmentTemplate: function (data, index, element) {
element.append("<i>" + data.movie + "</i>");
element.append("<p>Price: $" + data.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, 4, 24, 10, 05),
endDate: new Date(2016, 4, 24, 11, 30),
template: $("#individualTemplate")
}, {
// ...
}];In addition, you can use a 3rd-party template engine to customize the widget appearance. For more information, see the 3rd-Party Template Engines article.