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.
- 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.
- 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;
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.