React Scheduler - SchedulerAppointment

An object that describes an appointment in the Scheduler UI component.

import { SchedulerTypes } from "devextreme-react/scheduler"
Type: SchedulerTypes.Appointment

allDay

Specifies whether the appointment lasts all day.

Type:

Boolean

For details on all-day appointments, refer to the Appointment Types article.

View Demo

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

description

Specifies a detail description of the appointment.

Type:

String

disabled

Specifies whether the appointment responds to user interaction.

Type:

Boolean

Default Value: false

endDate

Specifies the ending of the appointment.

Type:

Date

|

String

We recommend that you specify appointment dates in UTC ISO 8601.

View Demo

See Also

endDateTimeZone

Specifies the time zone for an appointment's endDate. Accepts values from the IANA time zone database.

Type:

String

Users can view and edit the specified time zone in the appointment details form if you enable the editing.allowTimeZoneEditing property.

View Demo

See Also

html

Specifies the HTML markup to be inserted into the appointment element.

Type:

String

The Scheduler component evaluates the html property's value. This evaluation, however, makes the Scheduler potentially vulnerable to XSS attacks. To guard against these attacks, encode the HTML markup before you assign it to the html property. Refer to the following help topic for more information: Potentially Vulnerable API - html.

You can use the text property as a safe alternative.

recurrenceException

Specifies the start date and time of one or more appointments to exclude from a series. This property requires that you also set recurrenceRule.

Type:

String

View Demo

See Also

recurrenceRule

Specifies a recurrence rule based on which the Scheduler generates an appointment series.

Type:

String

The recurrenceRule value should contain an RRULE pattern as per the iCalendar RFC 2445 specification.

View Demo

If you need to obtain individual dates from an appointment series, use a 3rd-party library. In the following example, the rrule library is used:

JavaScript
import { formatDate } from "devextreme/localization";

const data = [{
    text: 'Watercolor Landscape',
    startDate: new Date('2020-11-01T17:30:00.000Z'),
    endDate: new Date('2020-11-01T19:00:00.000Z'),
    recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=6',
    recurrenceException: '20201109T173000Z'
}];

function logAppointmentOccurrences(appointmentData) {
    const startDateStr = formatDate(appointmentData.startDate, "yyyyMMddTHHmmssZ");
    const rule = new rrule.rrulestr(
        `DTSTART:${startDateStr}\n`
        + `RRULE:${appointmentData.recurrenceRule}\n`
        + `EXDATE:${appointmentData.recurrenceException}`
    );
    const occurrences = rule.all();
    occurrences.forEach(date => console.log(date));
}
See Also

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

startDate

Specifies the start of the appointment.

Type:

Date

|

String

We recommend that you specify appointment dates in UTC ISO 8601.

View Demo

See Also

startDateTimeZone

Specifies the time zone for an appointment's startDate. Accepts values from the IANA time zone database.

Type:

String

Users can view and edit the specified time zone in the appointment details form if you enable the editing.allowTimeZoneEditing property.

View Demo

See Also

template

Specifies a template that should be used to render this appointment only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.
See Also

text

Specifies the subject of the appointment.

Type:

String

The subject will present the appointment in a timetable.

View Demo

visible

Specifies whether or not an appointment must be displayed.

Type:

Boolean

Default Value: true