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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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(); |
