JavaScript/jQuery 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.

index.js
  • var 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
  • }
  • // ...
  • ];
  •  
  • $(function () {
  • $("#schedulerContainer").dxScheduler({
  • dataSource: appointments,
  • currentDate: new Date(2016, 4, 25)
  • });
  • });

If you need a more flexible solution, 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.

index.js
  • 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.

HTML
JavaScript
  • <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")
  • }, {
  • // ...
  • }];

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