function onAppointmentFormOpening(data) {
    var form = data.form,
        movie = getMovieById(data.appointmentData.MovieId) || {},
        startDate = new Date(data.appointmentData.StartDate);

    form.option("items", [{
        label: {
            text: "Movie"
        },
        editorType: "dxSelectBox",
        dataField: "MovieId",
        editorOptions: {
            dataSource: moviesData,
            displayExpr: "Text",
            valueExpr: "ID",
            onValueChanged: function(args) {
                movie = getMovieById(args.value);

                form.updateData("director", movie.Director);
                form.updateData("endDate", new Date(startDate.getTime() + 60 * 1000 * movie.Duration));
            }
        },
    }, {
        label: {
            text: "Director"
        },
        name: "Director",
        editorType: "dxTextBox",
        editorOptions: {
            value: movie.Director,
            readOnly: true
        }
    }, {
        dataField: "StartDate",
        editorType: "dxDateBox",
        editorOptions: {
            width: "100%",
            type: "datetime",
            onValueChanged: function(args) {
                startDate = new Date(args.value);

                form.updateData("endDate", new Date(startDate.getTime() + 60 * 1000 * movie.Duration));
            }
        }
    }, {
        name: "EndDate",
        dataField: "EndDate",
        editorType: "dxDateBox",
        editorOptions: {
            width: "100%",
            type: "datetime",
            readOnly: true
        }
    }, {
        dataField: "Price",
        editorType: "dxRadioGroup",
        editorOptions: {
            dataSource: [5, 10, 15, 20],
            itemTemplate: function(itemData) {
                return "$" + itemData;
            }
        }
    }]);
}