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();
}