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.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • const 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
  • }
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • dataSource={appointments}
  • defaultCurrentDate={new Date(2016, 4, 25)}
  • />
  • );
  • }
  • }
  • export default App;

If you need a more flexible solution, define a rendering function. The following code shows how to define a rendering function for appointments.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • const 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")
  • },
  • // ...
  • ];
  •  
  • const renderAppointment = (model) => {
  • return (
  • <React.Fragment>
  • <i>{{model.appointmentData.movie}}</i>
  • <p>Price: ${{model.appointmentData.price}}</p>
  • </React.Fragment>
  • );
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • dataSource={appointments}
  • defaultCurrentDate={new Date(2016, 4, 25)}
  • appointmentRender={renderAppointment}
  • />
  • );
  • }
  • }
  • export default App;

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