Schedule - Disable editing individual calendar events

[Justin Schnurer]

I have a requirement to show a ScheduleComponent with many events in it but to allow users to edit only certain events based on arbitrary business rules.

For example, my events might have an additional property named "facilityId" and "businessId". Based on the current user's profile, they might only have access only to "facilityId = 133". In this case, the only events on the ScheduleComponent that should be editable are the ones with facilityId = 133, and all other events should be read-only.

How can I accomplish this?

[Ravikumar Venkatesan]

Hi Justin,

Greetings from Syncfusion support.

We have validated your requirement “Disable editing individual calendar events” at our end. We have achieved your requirement by setting up the args.cancel to true when the appointment FacilityId does not match with the user FacilityId as shown in the below code snippet with help of the popupOpen, dragStart, and resizeStart events of the Schedule.

Sample: https://stackblitz.com/edit/ej2-react-schedule-prevent-crud-actions?file=index.js

[index.js]

export class TimelineGrouping extends SampleBase {

    data = [{

        Id: 1,

        Subject: 'Facility 133',

        StartTime: new Date(2022, 7, 23, 10),

        EndTime: new Date(2022, 7, 23, 12),

        ProjectId: 1,

        TaskId: 1,

        FacilityId: 133

    }, {

        Id: 2,

        Subject: 'Facility 134',

        StartTime: new Date(2022, 7, 23, 10),

        EndTime: new Date(2022, 7, 23, 12),

        ProjectId: 2,

        TaskId: 2,

        FacilityId: 134

    }];

    userFacilityId = 133;

 

    preventAction(data) {

        return data.FacilityId !== this.userFacilityId;

    }

 

    onPopupOpen(args) {

        if (['QuickInfo', 'Editor'].indexOf(args.type) > -1) {

            args.cancel = this.preventAction(args.data);

        }

    }

 

    onDragStart(args) {

        args.cancel = this.preventAction(args.data);

    }

 

    onResizeStart(args) {

        args.cancel = this.preventAction(args.data);

    }

 

    render() {

        return (

            <ScheduleComponent  popupOpen={this.onPopupOpen.bind(this)} dragStart={this.onDragStart.bind(this)} resizeStart={this.onResizeStart.bind(this)}>

            </ScheduleComponent>

        );

    }

}

Kindly try the shared solution and let us know if you need any further assistance on this.

API:

https://ej2.syncfusion.com/react/documentation/api/schedule/#popupopen

https://ej2.syncfusion.com/react/documentation/api/schedule/#dragstart

https://ej2.syncfusion.com/react/documentation/api/schedule/#resizestart

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.