React 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.vue
  • <template>
  • <DxScheduler
  • :data-source="appointments"
  • :current-date="currentDate"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxScheduler from 'devextreme-vue/scheduler';
  •  
  • export default {
  • components: {
  • DxScheduler
  • },
  • data() {
  • return {
  • currentDate: new Date(2016, 4, 25),
  • 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
  • }
  • // ...
  • ];
  • }
  • }
  • }
  • </script>

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

App.vue
  • <template>
  • <DxScheduler
  • :data-source="appointments"
  • :current-date="currentDate"
  • appointment-template="appointment"
  • >
  • <template #appointment="{ data }">
  • <i>{{data.appointmentData.movie}}</i>
  • <p>Price: ${{data.appointmentData.price}}</p>
  • </template>
  • </DxScheduler>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxScheduler from 'devextreme-vue/scheduler';
  •  
  • export default {
  • components: {
  • DxScheduler
  • },
  • data() {
  • return {
  • currentDate: new Date(2016, 4, 25),
  • appointments: [{
  • 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")
  • },
  • // ...
  • ];
  • }
  • }
  • }
  • </script>

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