Appointment Types

One-Time Appointments

A one-time appointment is a non-recurring appointment with specified start and end dates.

Scheduler One-Time Appointment

An object defining a one-time appointment has this structure.

JavaScript
var appointment = [{ 
    text: 'Meet with a customer', 
    startDate: new Date(2016, 4, 10, 11, 0), 
    endDate: new Date(2016, 4, 10, 13, 0)
}];

All-Day Appointments

An all-day appointment is a non-recurring appointment that lasts all day.

Scheduler All-Day Appointment

An object defining an all-day appointment should have the allDay field set to true and the startDate field specified; endDate is optional.

JavaScript
var allDayAppointment = [{
    text: "Fix bugs",
    startDate: new Date(2016, 4, 10),
    allDay: true
}];

If appointments in your data source omit the allDay field, but have another field instead, assign its name to the allDayExpr option.

jQuery
JavaScript
var allDayAppointments = [{
    text: "Fix bugs",
    startDate: new Date(2016, 4, 10),
    long: true
}];

$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: allDayAppointments,
        allDayExpr: "long"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="allDayAppointments"
    allDayExpr="long">
</dx-scheduler>
export class AppComponent  {
    allDayAppointments = [{
        text: "Fix bugs",
        startDate: new Date(2016, 4, 10),
        long: true
    }];
}
NOTE
For all-day appointments, the Scheduler ignores the time component of startDate and endDate.

In the UI, to mark an appointment as all-day, toggle the "All day" switcher on the appointment details form. This form appears when a user adds or updates an appointment.

Scheduler All Day Appointment Details

All-day appointments are displayed in the all-day panel, which is visible by default. If you do not intend to use such appointments, hide the all-day panel by assigning false to the showAllDayPanel option.

Recurring Appointments

A recurring appointment is an appointment that repeats after a specified period of time.

Scheduler Recurring Appointment

An object defining a recurring appointment should contain the recurrenceRule field that follows the iCalendar RFC 2445 specification.

JavaScript
var recurringAppointment = [{
    text: "Meeting",
    startDate: new Date(2016, 2, 3, 8, 0),
    endDate: new Date(2016, 2, 3, 9, 0),
    recurrenceRule: "FREQ=DAILY"
}];

If you want to exclude appointments from a recurrence, specify exceptions to the current recurring appointment using the recurrenceException option.

JavaScript
var recurringAppointment = [{
    text: "Meeting",
    startDate: new Date(2016, 4, 25, 10, 0),
    endDate: new Date(2016, 4, 25, 11, 00),
    recurrenceRule: "FREQ=DAILY",
    // This code excludes the 26-th and 28-th of May from the recurrence
    recurrenceException: "20160526T100000, 20160528T100000"
}];
NOTE
A time component of each item of the recurrenceException field must be the same as the time specified in the startDate field.

If your appointments contain other data fields instead of recurrenceRule and recurrenceException, assign their names to the recurrenceRuleExpr and recurrenceExceptionExpr options of the Scheduler instead.

jQuery
JavaScript
var recurringAppointments = [{ 
    // ...
    rule: "FREQ=DAILY",
    exception: "20160526T090000, 20160528T090000"
}];

$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: recurringAppointments,
        recurrenceRuleExpr: "rule",
        recurrenceExceptionExpr: "exception"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="recurringAppointments"
    recurrenceRuleExpr="rule"
    recurrenceExceptionExpr="exception">
</dx-scheduler>
export class AppComponent  {
    recurringAppointments = [{ 
        // ...
        rule: "FREQ=DAILY",
        exception: "20160526T090000, 20160528T090000"
    }];
}

In the UI, to mark an appointment as recurring, toggle the "Repeat" switcher on the appointment details form. Then, a set of new fields will appear.

Scheduler Recurring Appointment Details

These fields will be saved as the recurrenceRule field of an appointment object. Note that although a recurring appointment is displayed as several appointments on the timetable, only a single appointment object is saved in the data source.

See Also