private _renderContent()

in legacy/src/Calendar/Dialogs.ts [166:305]


    private _renderContent() {
        this._eventValidationError = <Controls_Notifications.MessageAreaControl>Controls.BaseControl.createIn(
            Controls_Notifications.MessageAreaControl,
            this._$container,
            { closeable: false },
        );

        const $editControl = $(domElem("div", "event-edit-control"));
        const $fieldsContainer = $(domElem("table")).appendTo($editControl);

        // Build title input
        if (this._content.title) {
            this._$titleInput = $("<input type='text' class='requiredInfoLight' id='fieldTitle'/>")
                .val(this._calendarEvent.title)
                .bind("blur", e => {
                    this._validate(true);
                });
        }

        const startDateString = Utils_Date.localeFormat(
            Utils_Date.shiftToUTC(new Date(this._calendarEvent.startDate)),
            Culture.getDateTimeFormat().ShortDatePattern,
            true,
        );
        let endDateString = startDateString;

        // Build start input
        if (this._content.start) {
            this._$startInput = $("<input type='text' id='fieldStartDate' />")
                .val(startDateString)
                .bind("blur", e => {
                    this._validate(true);
                });
        }

        // Build end input
        if (this._content.end) {
            if (this._calendarEvent.endDate) {
                endDateString = Utils_Date.localeFormat(
                    Utils_Date.shiftToUTC(new Date(this._calendarEvent.endDate)),
                    Culture.getDateTimeFormat().ShortDatePattern,
                    true,
                );
            }
            this._$endInput = $("<input type='text' id='fieldEndDate' />").bind("blur", e => {
                this._validate(true);
            });
            this._$endInput.val(endDateString);
        }

        // Build text inputs
        if (this._content.textFields) {
            const textFields = this._content.textFields;
            for (const textField of textFields) {
                const textInput = $(
                    Utils_String.format("<input type='text' class='requiredInfoLight' id='field{0}'/>", textField.label),
                );
                if (textField.checkValid) {
                    textInput.bind("blur", e => {
                        this._validate(true);
                    });
                }
                if (textField.initialValue) {
                    textInput.val(textField.initialValue);
                }
                if (textField.disabled) {
                    textInput.prop("disabled", true);
                }
                this._$textInputs.push(textInput);
            }
        }

        // Build combo inputs
        if (this._content.comboFields) {
            const comboFields = this._content.comboFields;
            for (const comboField of comboFields) {
                const comboInput = $(
                    Utils_String.format("<input type='text' class='requiredInfoLight' id='field{0}' />", comboField.label),
                );

                if (comboField.initialValue) {
                    comboInput.val(comboField.initialValue);
                }
                if (comboField.checkValid) {
                    comboInput.bind("blur", e => {
                        this._validate(true);
                    });
                }

                this._$comboInputs.push(comboInput);
            }
        }

        // Populate fields container with fields. The form fields array contain pairs of field label and field element itself.
        const fields = this._getFormFields();
        for (let i = 0, l = fields.length; i < l; i += 1) {
            const labelName = fields[i][0];
            const field = fields[i][1];
            if (field) {
                if (i === 0) {
                    field.attr("autofocus", true);
                }
                const $row = $(domElem("tr"));

                const fieldId = field.attr("id") || $("input", field).attr("id");
                $(domElem("label"))
                    .attr("for", fieldId)
                    .text(labelName)
                    .appendTo($(domElem("td", "label")).appendTo($row));

                field.appendTo($(domElem("td")).appendTo($row));

                $row.appendTo($fieldsContainer);
            }
        }

        this._$container.append($editControl).bind("keyup", event => {
            if (event.keyCode == Utils_UI.KeyCode.ENTER) {
                this.onOkClick();
            } else if (event.keyCode == Utils_UI.KeyCode.ESCAPE) {
                this.onClose();
            }
        });

        if (this._content.comboFields) {
            this._buildComboControls();
        }

        // Add date pickers combos to DOM
        <Controls_Combos.Combo>Controls.Enhancement.enhance(Controls_Combos.Combo, this._$startInput, {
            type: "date-time",
        });

        <Controls_Combos.Combo>Controls.Enhancement.enhance(Controls_Combos.Combo, this._$endInput, {
            type: "date-time",
        });

        this._setupValidators();
        this._validate();
    }