We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
New Product Launch - BoldDesk !
Introducing help desk ticketing software.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.
|
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css'; |
|
let roomElement: HTMLInputElement = args.element.querySelector('#RoomId');
if (!roomElement.classList.contains('e-multiselect')) {
let roomObject: MultiSelect = new MultiSelect({
placeholder: 'Choose a owner',
fields: { text: 'RoomText', value: 'Id' },
dataSource: (this.roomDataSource as any),
value: <string[]>(((args.data as any).RoomId instanceof Array) ? (args.data as any).RoomId : [(args.data as any).RoomId])
});
roomObject.appendTo(roomElement);
}
let ownerElement: HTMLInputElement = args.element.querySelector('#OwnerId');
if (!ownerElement.classList.contains('e-multiselect')) {
let ownerObject: MultiSelect = new MultiSelect({
placeholder: 'Choose a owner',
fields: { text: 'OwnerText', value: 'Id' },
dataSource: (this.ownerDataSource as any),
value: <string[]>(((args.data as any).OwnerId instanceof Array) ? (args.data as any).OwnerId : [(args.data as any).OwnerId])
});
ownerObject.appendTo(ownerElement);
} |
|
if (args.target.classList.contains('e-work-cells')) {
let subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
subjectElement.value = "Enter some text";
} |
|
<input id="StartTime" class="e-field" type="text" name="StartTime" autofocus /> |
|
var dialog = (args.element as any).ej2_instances[0];
dialog.open = function () {
(args.element.querySelector('.e-schedule-dialog #RoomId') as any).ej2_instances[0].refresh();
(args.element.querySelector('.e-schedule-dialog #OwnerId') as any).ej2_instances[0].refresh();
}; |
|
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css'; |
|
onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'QuickInfo') {
const dialogObj = (args.element as any).ej2_instances[0];
dialogObj.hide();
const currentAction = args.target.classList.contains("e-work-cells") ? "Add" : "Save";
this.scheduleObj.openEditor(args.data, currentAction);
}
} |
|
public customFn(args: any): Boolean {
// It allows to select the date only a year in 2018
return (new Date(args.element.value).getFullYear() === 2018);
}
onPopupClose(args: PopupCloseEventArgs): void {
if (args.type === 'Editor') {
var letters = /^[A-Za-z]+$/;
var firstChar = (args.data as any).Subject.charCodeAt(0);
if (!(args.data as any).Subject.match(letters)) {
alert('Please enter alphabets only');
args.cancel = true;
}
}
} |
|
public onPopupOpen(args: PopupOpenEventArgs): void {
if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
args.cancel = this.onEventCheck(args);
}
}
public onEventRendered(args: EventRenderedArgs): void {
args.cancel = this.onEventCheck(args);
}
public onActionBegin(args: ActionEventArgs): void {
if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') {
args.cancel = this.onEventCheck(args);
}
}
public onEventCheck(args: any): boolean {
let eventObj: any = args.data instanceof Array ? args.data[0] : args.data;
let currentDate: Date = new Date(new Date().setHours(0, 0, 0, 0));
let eDate: Date = new Date(new Date(eventObj.StartTime).setHours(0, 0, 0, 0));
return (eDate < currentDate);
}
public onRenderCell(args: RenderCellEventArgs): void {
let currentDate: Date = new Date(new Date().setHours(0, 0, 0, 0));
let eDate: Date = new Date(new Date(args.date).setHours(0, 0, 0, 0));
if (args.elementType == "dateHeader" || args.elementType == "workCells") {
if (eDate < currentDate) {
args.element.classList.add('disable-dates');
}
}
} |
|
onPopupOpen(args: PopupOpenEventArgs): void {
if (args.type === 'QuickInfo') {
const dialogObj = (args.element as any).ej2_instances[0];
dialogObj.hide();
const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save';
this.scheduleObj.openEditor(args.data, currentAction);
}
if (args.type === 'Editor') {
const formElement: HTMLElement = args.element.querySelector('.e-schedule-form');
const validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
validator.dataBind();
// To open editor window with fixed value
const subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
subjectElement.value = (args.data as any).Subject || 'Enter some text';
const emailElement: HTMLInputElement = args.element.querySelector('#Email') as HTMLInputElement;
emailElement.value = (args.data as any).Email || '';
// To email address validation
validator.addRules('Email', { email: [true] });
const statusElement: HTMLInputElement = args.element.querySelector('#EventType') as HTMLInputElement;
if (!statusElement.classList.contains('e-dropdownlist')) {
const dropDownListObject: DropDownList = new DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
statusElement.setAttribute('name', 'EventType');
}
const startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement;
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
const endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement;
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
} |
|
public minDate: Date = new Date(new Date().setHours(0, 0, 0, 0));
public selectedDate: Date = new Date(new Date().setHours(0, 0, 0, 0)); |
|
<tr>
<td class="e-textlabel">Email</td>
<td colspan="4">
<input id="Email" class="e-field e-input" type="text" value="" name="Email" style="width: 100%" autofocus />
</td>
</tr> |
|
public group: GroupModel = {
resources: ['Categories'], enableCompactView: false
}; |
|
const reasonElement: HTMLInputElement = args.element.querySelector('#Description') as HTMLInputElement;
reasonElement.value = 'This is not an editable field';
reasonElement.setAttribute('disabled', 'true'); |
