DevExtreme Angular - Customize Appointment Details Form

To customize the appointment details form, create a handler of the appointmentFormCreated event. The handler allows you to get the Form instance used to render the appointment details. Within the handler function, use the itemOption(id, options) method to update options of a form item.

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "His Girl Friday",
            startDate: new Date(2016, 4, 24, 9, 10),
            endDate: new Date(2016, 4, 24, 11, 20)
        }, 
        // ...
        ],
        currentDate: new Date(2016, 4, 24),
        onAppointmentFormCreated: function (e) {
            var form = e.form;
            form.itemOption("startDate", {
                helpText: "Select a date between May 11 and 27",
                editorOptions: {
                    min: new Date(2016, 4, 11),
                    max: new Date(2016, 4, 27),
                    type: 'datetime'
                }
            });
            // By default, fields that show timezones are hidden
            // To show them, use the code below
            form.itemOption("startDateTimeZone", { visible: true });
            form.itemOption("endDateTimeZone", { visible: true });
        }
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    schedulerData = [{
        text: "His Girl Friday",
        startDate: new Date(2016, 4, 24, 9, 10),
        endDate: new Date(2016, 4, 24, 11, 20)
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 24);

    onAppointmentFormCreated (e) {
        var form = e.form;
        form.itemOption("startDate", {
            helpText: "Select a date between May 11 and 27",
            editorOptions: {
                min: new Date(2016, 4, 11),
                max: new Date(2016, 4, 27),
                type: 'datetime'
            }
        });
        // By default, fields that show timezones are hidden
        // To show them, use the code below
        form.itemOption("startDateTimeZone", { visible: true });
        form.itemOption("endDateTimeZone", { visible: true });
    }
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler 
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    (onAppointmentFormCreated)="onAppointmentFormCreated($event)">
</dx-scheduler>

View Demo Watch Video

See Also