Disable the CRUD actions in the past dates of the Angular Schedule
This knowledge base explains how to disable CRUD (Create, Read, Update, Delete) actions in the 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 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: Add the following CSS code in the app.component.css file to prevent the CRUD actions in the past time cells.
[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 the past dates.
Sample: You can refer to this GitHub sample for this functionality.
Conclusion
I 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, Direct-Trac, or feedback portal. We are always happy to assist you!
