Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 151209 | Feb 3,2020 11:37 PM UTC | Mar 12,2020 04:24 AM UTC | Angular - EJ 2 | 25 |
|
Tags: Schedule |
|
if (args.type === 'QuickInfo') {
if ((args.target.classList.contains('e-work-cells'))) {
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.target.classList.contains('e-appointment'))) {
console.log('cannot edit, view details or delete an appointment');
args.cancel = true;
this.toastObj.show({
title: 'Information !',
content: 'You cannot edit, view details or delete an appointment',
cssClass: 'e-toast-info'
});
}
} |
|
<ng-template #timeScaleMajorSlotTemplate let-data>
<div class="majorTime">{{getMajorTime(data.date)}}</div>
</ng-template>
<ng-template #timeScaleMinorSlotTemplate let-data>
<div class="minorTime">{{getMinorTime(data.date)}}</div>
</ng-template>
|
|
public timeScale: TimeScaleModel = {
enable: true,
interval: 60,
slotCount: 2,
majorSlotTemplate: '#majorSlotTemplate',
minorSlotTemplate: '#minorSlotTemplate'
};
public instance: Internationalization = new Internationalization();
getMajorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'hm' });
}
getMinorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
} |
|
.e-resource-text {
text-align: center;
padding-left: 0px !important;
} |
|
// var dialog = (args.element as any).ej2_instances[0];
// dialog.open = function () {
// (args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh();
// }; |
|
<ng-template #timeScaleMajorSlotTemplate let-data>
<div class="majorTime">{{getMajorTime(data.date)}}</div>
</ng-template>
<ng-template #timeScaleMinorSlotTemplate let-data>
<div class="minorTime">{{getMinorTime(data.date)}}</div>
</ng-template>
|
|
public timeScale: TimeScaleModel = {
enable: true,
interval: 90,
slotCount: 1,
majorSlotTemplate: '#majorSlotTemplate',
minorSlotTemplate: '#minorSlotTemplate'
};
public instance: Internationalization = new Internationalization();
getMajorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'hm' });
}
getMinorTime(date: Date): string {
return this.instance.formatDate(date, { skeleton: 'ms' }).replace(':00', '');
} |
|
// To aligned resource name as center in Timeline view
.e-resource-text {
text-align: center;
padding-left: 0px !important;
}
// To aligned resource name as center in Vertical view
.e-schedule .e-resource-cells .e-text-ellipsis {
text-align: center;
} |
|
// To reduce the quick popup size in mobile mode
.e-quick-popup-wrapper.e-device {
height: 30% !important;
top: 30% !important;
} |
|
public onActionBegin(args: ActionEventArgs): void {
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') {
args.cancel = obj.StartTime.getTime() < new Date().getTime();
}
} |
|
<ng-template #dateHeaderTemplate let-data>
<div class="date-text">{{getDateHeaderText(data.date)}}</div>
</ng-template> |
|
getDateHeaderText = (value: Date) => {
const date = new Date(value);
const dayNames = [
'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
];
const dayIndex = date.getDay();
return '' + dayNames[dayIndex] + ', ' + date.getDate();
} |
|
// To display date header text in center alignment
.date-text {
text-align: center;
} |
|
if ((args.target && !args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
args.cancel = obj.StartTime.getTime() < new Date().getTime();
}
public onDragStop(args: DragEventArgs): void {
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
args.cancel = obj.StartTime.getTime() < new Date().getTime();
}
public onResizeStop(args: ResizeEventArgs): void {
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
args.cancel = obj.StartTime.getTime() < new Date().getTime();
}
|
|
public onPopupOpen(args: PopupOpenEventArgs): void {
// Q6 - open the Editor with one click
if (args.type === 'QuickInfo' && (args.target.classList.contains('e-work-cells'))) {
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') {
args.duration = 90;
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
var dialog = (args.element as any).ej2_instances[0];
dialog.open = function () {
(args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh();
};
const subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
subjectElement.value = (args.data as any).Subject = 'Reservation';
const roomElement: HTMLInputElement = args.element.querySelector('#RoomName');
if (!roomElement.classList.contains('e-multiselect')) {
let roomObject: MultiSelect = new MultiSelect({
placeholder: 'Choose a room',
fields: { text: 'roomName', value: 'roomName' },
dataSource: (this.roomsDataSource as any),
value: <string[]>(((args.data as any).RoomName instanceof Array) ? (args.data as any).RoomName : [(args.data as any).RoomName])
});
roomObject.appendTo(roomElement);
}
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);
}
// validations
const formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
const validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
validator.dataBind();
validator.addRules('Name', { required: true });
validator.addRules('Email', { required: true, email: [true] });
args.cancel = obj.StartTime.getTime() < new Date().getTime();
if (args.target && (args.target.classList.contains('e-appointment'))) {
console.log('cannot edit, view details or delete an appointment');
if (obj.StartTime.getTime() < new Date().getTime()) {
this.toastObj.show({
title: 'Information !',
content: 'You cannot edit, view details or delete an appointment',
cssClass: 'e-toast-info'
});
}
}
}
} |
|
public onPopupOpen(args: PopupOpenEventArgs): void {
// Q6 - open the Editor with one click
if (args.type === 'QuickInfo' && (args.target.classList.contains('e-work-cells'))) {
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') {
args.duration = 90;
const obj: any = args.data instanceof Array ? args.data[0] : args.data;
var dialog = (args.element as any).ej2_instances[0];
dialog.open = function () {
(args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh();
};
const subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement;
subjectElement.value = (args.data as any).Subject = 'Reservation';
const roomElement: HTMLInputElement = args.element.querySelector('#RoomName');
if (!roomElement.classList.contains('e-multiselect')) {
let roomObject: MultiSelect = new MultiSelect({
placeholder: 'Choose a room',
fields: { text: 'roomName', value: 'roomName' },
dataSource: (this.roomsDataSource as any),
value: <string[]>(((args.data as any).RoomName instanceof Array) ? (args.data as any).RoomName : [(args.data as any).RoomName])
});
roomObject.appendTo(roomElement);
}
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);
}
// validations
const formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
const validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator);
validator.dataBind();
validator.addRules('Name', { required: true });
validator.addRules('Email', { required: true, email: [true] });
if (args.target && (args.target.classList.contains('e-appointment'))) {
args.cancel = true;
console.log('cannot edit, view details or delete an appointment');
this.toastObj.show({
title: 'Information !',
content: 'You cannot edit, view details or delete an appointment',
cssClass: 'e-toast-info'
});
} else if (obj.StartTime.getTime() < new Date().getTime()) {
args.cancel = true;
this.toastObj.show({
title: 'Information !',
content: 'You cannot add an appointment in the past times',
cssClass: 'e-toast-info'
});
}
}
} |
|
// To disabling the delete icon
.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete {
display: none;
} |
|
// To disabling the delete icon for long tap window
.e-quick-popup-wrapper.e-device .e-popup-header .e-delete {
display: none;
} |
|
// To prevent the past days in week view
public firstDayOfWeek: Number = new Date().getDay(); |
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
