Disable the CRUD actions in the past dates of the Angular Schedule
This article explains how to disable CRUD (Create, Read, Update, Delete) actions on past dates of the schedule.
Disable the CRUD actions:
Follow the below steps to achieve the functionality “disable CRUD actions in past dates of the Schedule”.
Step 1: Create an Angular Scheduler by referring to the following user guide link.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#getting-started
Step 2: Bind the renderCell and actionBegin events to the Angular Schedule component as shown below.
[app.component.html]
<ejs-schedule #scheduleObj [eventSettings]='eventSettings' (renderCell)="onRenderCell($event)" (actionBegin)="onActionBegin($event)" ></ejs-schedule>
Step 3: Add the definition for the methods that bind with the renderCell and actionBegin events, as shown below.
[app.component.ts]
onActionBegin(args: ActionEventArgs) {
if (args.requestType === 'eventCreate' || args.requestType === 'eventChange' || args.requestType === "eventRemove") {
if (this.isPast(args)) {
// Preventing the edit by setting up "true" to "args.cancel"
args.cancel = true;
alert('Adding an event to the past time and editing an event on the past time is not allowed.');
}
}
}
onRenderCell(args: RenderCellEventArgs): void {
// Adding "e-disable-date" class to preventing the CRUD actions in the past date and time cells
if (args.date < new Date()) {
args.element.classList.add('e-disable-dates');
}
}
Step 4: Add the method called isPast as shown in the following code to check whether the corresponding event is valid to edit or not.
[app.component.ts]
isPast(args: ActionEventArgs): boolean {
// Validating the corresponding event time is valid for edit action or not and returning the result
let eventObj: { [key: string]: Object } = args.data instanceof Array ? args.data[0] : args.data;
let result: boolean = eventObj.StartTime < new Date();
if(!(args.data instanceof Array)) {
let rule = new Predicate("Id", "equal", eventObj.Id as number, false);
let datas: { [key: string]: Object }[] = new DataManager(this.scheduleObj.eventsData).executeLocal(new Query().where(rule)) as { [key: string]: Object }[];
if(datas.length > 0) {
result = datas[0].StartTime > new Date() ? result : datas[0].StartTime < new Date();
}
}
return result;
}
Step 5:
[app.component.css]
/* To disable the cell click action in schedule */
.e-disable-dates {
pointer-events: none;
}
/* To enable showing event quick info popup action on month view */
.e-disable-dates .e-appointment-wrapper {
pointer-events: all;
}
Step 6: Run the sample. Now, you cannot add or edit an event for past dates.
Sample: You can refer to this GitHub sample for this functionality.
Conclusion
We hope you enjoyed learning about how to disable the CRUD actions in the past dates of the Angular Schedule.
You can refer to
our Angular
Schedule feature tour page to know about its other
groundbreaking feature representation and
documentation, and how to quickly get started for
configuration specifications. You can also explore our
Angular Schedule example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
