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 LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
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(); |
