Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
150195 | Dec 25,2019 07:25 AM UTC | Feb 5,2020 06:33 AM UTC | Angular - EJ 2 | 32 |
![]() |
Tags: Schedule |
@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'); |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.