When I reseize, the event selection disappeared - from 187056

[MP]

Manasee Punjani

Mar 6, 2024

I noticed few things that is not working on my side and also wanted to know how can I accomplish 

Not working: 

1) When I reseize, the event selection disappeared. 

2) How do I get conferenceId --> Is that the groupIndex ? 

Would like to do 

1) When I click on the event, I would like to disable the edit option, I only want delete and cancel button

2) I would like the data coming from database OR in the case datasource.json to be readonly.

3) In the attachment, I see a CSS issue on the right side of the event, there is a gap, how can I fix that ( attached )

4) Is there an example to load datasource.json from the DB ? 

MP

Manasee Punjani

Mar 6

/**

* schedule resources group-editing sample

*/

const GroupEditing = () => {

const [eventLog, setEventLog] = useState('');

const scheduleObj = useRef(null);

const data = extend([], dataSource.resourceConferenceData, null, true);

const resourceData = [

{ Text: 'ABC', Id: 1, Color: '#1aaa55' },

{ Text: 'XYZ', Id: 2, Color: '#357cd2' },

{ Text: 'AJD', Id: 3, Color: '#7fa900' },

{ Text: 'UDJ', Id: 4, Color: '#357cd2' },

{ Text: 'XIS', Id: 5, Color: '#7fa900' },

{ Text: 'OED', Id: 6, Color: '#7fa900' },

{ Text: 'AOX', Id: 7, Color: '#357cd2' },

{ Text: 'IQWW', Id: 8, Color: '#7fa900' },

];

const getEmployeeName = (value) => {

return ((value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName);

};

const onCellClick = (args) => {

var today = new Date(args.startTime);

const endTime = today.setHours(today.getHours() + 1);

let Data = [{

"Id": 14, // randomID

"StartTimezone":"America/Chicago",

"EndTimezone":"America/Chicago",

"Subject": "Web Summit123",

"StartTime": args.startTime,

"EndTime": new Date(endTime),

"ConferenceId": [

args.groupIndex+1

]

}]

args.cancel = true;

scheduleObj.current.addEvent(Data);

};

return (<div className='schedule-control-section'>

<div className='col-lg-12 control-section'>

<div className='control-wrapper'>

<ScheduleComponent

ref={scheduleObj}

cellClick={onCellClick.bind(this)}

// created={onCreate}

endHour='23:00'

startHour='9:00'

timeScale={ {interval: 60, slotCount: 2}}

cssClass='group-editing'

width='100%' height='650px'

selectedDate={new Date(2021, 5, 5)}

eventSettings={{ dataSource: data, fields: { } }}

group={{ allowGroupEdit: true, resources: ['Conferences'] }}>

<ResourcesDirective>

<ResourceDirective field='ConferenceId' title='Attendees' name='Conferences'

allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

<Inject services={[Day, TimelineViews, Resize, DragAndDrop]}/>

</ScheduleComponent>

</div>

</div>

</div>);

};

export default GroupEditing;

[Ashokkumar Karuppasamy]

Hi Manasee Punjani,

Not working:

1) When I reseize, the event selection disappeared.

The default schedule resize scenario events are not disappearing. Please specify the nature of the problems you are facing, as this information will greatly assist us in understanding and resolving the issue effectively.

2) How do I get conferenceId --> Is that the groupIndex ?

You can obtain the groupIndex using the getResourcesByIndex method in the schedule. By getting the resource ID, you can customize it according to your needs.

Sample: Sample: https://stackblitz.com/edit/react-fptybz-q8x5uj?file=index.js,datasource.json

  const onCellClick = (args) => {

      debugger;

      args.cancel = true;

      const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.ConferenceId

      count = count + 1

      let eventData = {

        Subject: "event-" + count,

        StartTime: args.startTime,

        EndTime: args.endTime,

        IsAllDay: args.isAllDay,

        ConferenceId: getGroupId

      };

      scheduleObj.current.addEvent(eventData);

    }

Would like to do

1) When I click on the event, I would like to disable the edit option, I only want delete and cancel button

You can achieve your requirement by setting the allowEditing property to false in the schedule event settings.

Sample: https://stackblitz.com/edit/react-fptybz-q8x5uj?file=index.js,datasource.json

div className='control-wrapper'>

          <ScheduleComponent ref={scheduleObj} cssClass='group-editing' width='100%' height='650px' selectedDate={new Date(2021, 5, 5)} currentView='WorkWeek'  cellClick={onCellClick} resourceHeaderTemplate={resourceHeaderTemplate} eventSettings={{ dataSource: data,ignoreWhitespace: true, allowEditing: false, 

          fields: { subject: { title: 'Conference Name', name: 'Subject' }, description: { title: 'Summary', name: 'Description' }, startTime: { title: 'From', name: 'StartTime' }, endTime: { title: 'To', name: 'EndTime' } } }} group={{ allowGroupEdit: true, resources: ['Conferences'] }}>

 

2) I would like the data coming from database OR in the case datasource.json to be readonly.

You can achieve your requirement by setting the IsReadOnly property to true for appointments. This way, CRUD actions will be prevented only on those specific appointments, as shown in the below code snippets. Please try the solution and let us know if you need further assistance.

Sample: https://stackblitz.com/edit/react-fptybz-q8x5uj?file=index.js,datasource.json

UG: https://ej2.syncfusion.com/react/documentation/schedule/appointments#make-specific-events-readonly

 "resourceConferenceData": [

        {

            "Id": 1,

            "Subject": "Burning Man",

            "StartTime": "2021-06-01T09:30:00.000Z",

            "EndTime": "2021-06-01T11:30:00.000Z",

            "ConferenceId": [

                1,

                2,

                3

            ],

            "IsReadonly": true

        },

3) In the attachment, I see a CSS issue on the right side of the event, there is a gap, how can I fix that ( attached )

It is not an issue. we have maintained an event gap for clicking to add the new event.

4) Is there an example to load datasource.json from the DB ?

Based on the shared details, we have provided the backend and database connections below for reference. Please try the suggested solution, and feel free to reach out if you need any further assistance. The attached code snippet and sample below demonstrate the solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/ant-modal-form-back-end-connect-z7j4d4?file=package.json,index.js,index.html

Backend service attached as zip

UG: https://ej2.syncfusion.com/react/documentation/schedule/data-binding#scheduler-crud-actions

Forum Tickets:
https://forumassist.syncfusion.com/178606
https://forumassist.syncfusion.com/178161

[index.js]

  let resourceData = new DataManager({

    url: 'http://localhost:54738/Home/GetResourceData',

    crudUrl: 'http://localhost:54738/Home/UpdateData',

    adaptor: new UrlAdaptor,

    crossDomain: true

})

 

let loadData = new DataManager({

    url: 'http://localhost:54738/Home/LoadData',

    adaptor: new UrlAdaptor,

    crossDomain: true

})

 <ScheduleComponent

            cssClass="timeline-resource-grouping"

            width="100%"

            height="650px"

            selectedDate={new Date(2021, 1, 15)}

            eventSettings={{

              dataSource: loadData,

              fields: {

                subject: { name: 'Subject', validation: { required: [true, 'Subject empty is not allowed.'] } },

                location: {

                  name: 'Description', validation: { required: [true, 'Description empty is not allowed.'] }

                }

              }

            }}

          >

            <ResourcesDirective>

              <ResourceDirective

                field="EmployeeId"

                title="Employees"

                name="Employee"

                allowMultiple={false}

                dataSource={resourceData}

                textField="Text"

                idField="Id"

                colorField="Color"

              />

 

 

Backend Service:

        public JsonResult LoadData(Params param)  // Here we get the Start and End Date of current view, based on that can filter the data and return to Scheduler

        {

            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= param.StartDate && app.StartTime <= param.EndDate) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList();  // Here filtering the events based on the start and end date value.

            return Json(data, JsonRequestBehavior.AllowGet);

        }

 

 

        public class Params

        {

            public DateTime StartDate { get; set; }

            public DateTime EndDate { get; set; }

        }

 

        public JsonResult GetResourceData()

 

        {

 

            List<OwnerRes> owners = new List<OwnerRes>();

 

            owners.Add(new OwnerRes { text = "Nathalie", id = 1, color = "#9e5fff" });

            owners.Add(new OwnerRes { text = "Kevin", id = 2, color = "#f8a398" });

            owners.Add(new OwnerRes { text = "Amy", id = 3, color = "#7499e1" });

            owners.Add(new OwnerRes { text = "Roy", id = 3, color = "#7499e1" });

 

            return Json(owners);

 

        }

 

        public class OwnerRes

        {

            public string text { set; get; }

            public int id { set; get; }

            public string color { set; get; }

        }

 

        [HttpPost]

        public JsonResult UpdateData(EditParams param)

        {

            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments

            {

                for (var i = 0; i < param.added.Count; i++)

                {

                    var value = (param.action == "insert") ? param.value : param.added[i];

                    int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;

                    DateTime startTime = Convert.ToDateTime(value.StartTime);

                    DateTime endTime = Convert.ToDateTime(value.EndTime);

                    ScheduleEventData appointment = new ScheduleEventData()

                    {

                        Id = intMax + 1,

                        StartTime = startTime,

                        EndTime = endTime,

                        Subject = value.Subject,

                        Location = value.Location,

                        Description = value.Description,

                        IsAllDay = value.IsAllDay,

                        StartTimezone = value.StartTimezone,

                        EndTimezone = value.EndTimezone,

                        RecurrenceRule = value.RecurrenceRule,

                        RecurrenceID = value.RecurrenceID,

                        RecurrenceException = value.RecurrenceException,

                        //GroupID = value.GroupID.ToString()

                    };

                    db.ScheduleEventDatas.InsertOnSubmit(appointment);

                    db.SubmitChanges();

                }

            }

Regards,
Ashok

[MP]

Not working:

1) When I reseize, the event selection disappeared.

I got the working example from the CRUD site and it's working now. 

2) How do I get conferenceId --> Is that the groupIndex ? Thanks its working now

3) 1) When I click on the event, I would like to disable the edit option, I only want delete and cancel button --> Thanks it's working now

4) 3) In the attachment, I see a CSS issue on the right side of the event, there is a gap, how can I fix that ( attached )  -- I was able to fix that well on the code. Pls, check . 

5) With the current code, my delete functionality is broken, can you pls check what is wrong with the code? 

import * as React from 'react';

import { useEffect, useState } from 'react';

import { useRef } from 'react';

import { Day, WorkWeek, Month, ScheduleComponent,ScheduleTimeScale, ResourcesDirective, ResourceDirective, ViewsDirective, ViewDirective, Inject, TimelineViews, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

import {SampleBase} from './SampleBase'

import { extend } from '@syncfusion/ej2-base';

import { default as dataSource} from '../data/datasource.json';

const save = 'e-event-create e-text-ellipsis e-control e-btn e-lib e-flat e-primary';

const saveEvent = 'e-control e-btn e-lib e-primary e-event-save e-flat';

const moreDetails = 'e-event-details e-text-ellipsis e-control e-btn e-lib e-flat';

/**

* schedule resources group-editing sample

*/

const GroupEditing = () => {

const [currentView, setCurrentView] = useState("Day");

const scheduleObj = useRef(null);

const data = extend([], dataSource.resourceConferenceData, null, true);

const resourceData = [

{ Text: 'ABC', Id: 1, Color: '#D2691E' },

{ Text: 'XYZ', Id: 2, Color: '#CD5C5C' },

{ Text: 'AJD', Id: 3, Color: '#FFA07A' },

{ Text: 'UDJ', Id: 4, Color: '#357cd2' },

{ Text: 'XIS', Id: 5, Color: '#87CEFA' },

{ Text: 'OED', Id: 6, Color: '#7fa900' },

{ Text: 'AOX', Id: 7, Color: '#90EE90' },

{ Text: 'IQWW', Id: 8, Color: '#008080' },

];

const getEmployeeName = (value) => {

return ((value.resourceData) ? value.resourceData[value.resource.textField] : value.resourceName);

};

// const onPopupClose = (args) => {

// console.log('args', args)

// //if (args.data.EndTime < scheduleObj.current.selectedDate) {

// //args.element.classList.add('e-past-app');

// /// }

// }

const onCellClick = (args) => {

let count = 0;

// debugger;

args.cancel = true;

var today = new Date(args.startTime);

const endTime = today.setHours(today.getHours() + 1);

const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.ConferenceId

count = count + 1

let eventData = {

Subject: "event-" + count,

StartTime: args.startTime,

EndTime: new Date(endTime),

IsAllDay: args.isAllDay,

ConferenceId: getGroupId

};

//console.log("<><><>", !scheduleObj.current.isSlotAvailable(args.startTime, endTime));

args.cancel = true

console.log('eventData', eventData)

scheduleObj.current.addEvent(eventData);

}

return (<div className='schedule-control-section'>

<div className='col-lg-12 control-section'>

<div className='control-wrapper'>

<ScheduleComponent ref={scheduleObj} cssClass='group-editing' width='100%' height='650px'

endHour='23:00' timeScale={ {interval: 60, slotCount: 2}}

startHour='9:00' selectedDate={new Date(2021, 5, 5)} cellClick={onCellClick}

eventSettings={{ dataSource: data, ignoreWhitespace: false, allowEditing: false,

enableTooltip: true, enableMaxHeight: true, enableIndicator: false,

fields: { subject: { title: 'Conference Name', name: 'Subject' },

description: { title: 'Summary', name: 'Description' }, startTime: { title: 'From', name: 'StartTime' }, endTime: { title: 'To', name: 'EndTime' } } }}

group={{ allowGroupEdit: true, resources: ['Conferences'] }}>

<ResourcesDirective>

<ResourceDirective field='ConferenceId' title='Attendees' name='Conferences'

allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

<Inject services={[Day, TimelineViews, Resize, DragAndDrop]}/>

</ScheduleComponent>

</div>

</div>

</div>);

};

export default GroupEditing;

4) From DB -- I need to try and will share the code. 

/////////// Things I would like to do //////////////// Do you want me create a new ticket 

scheduler component

1) Disable past events

2) disable others events - readOnly

3) delete its own events

4) horizontal view & Vertical view for Resource

5) pick your colors event -

6) if its an all day event then entire day must be blocked

[Ashokkumar Karuppasamy]

Hi Manasee Punjani,

Q1)I was able to fix that well on the code. Pls, check ?

It's the default behavior of the schedule, so updating the last update mentioned is not an issue.

Q2) With the current code, my delete functionality is broken, can you pls check what is wrong with the code?

Based on the shared details, we suspect that the selected event is not deleted when all appointments have the same resource. To avoid this behavior, we suggest setting the allowGroupEdit property to false. The attached code snippet and sample below demonstrate the solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-fptybz-jgt5n2?file=index.js,datasource.json

          <ScheduleComponent ref={scheduleObj} cssClass='group-editing' width='100%'  endHour='23:00'  startHour='9:00'  height='650px' selectedDate={new Date(2021, 5, 5)} currentView='WorkWeek'  cellClick={onCellClick} eventSettings={{ dataSource: data,ignoreWhitespace: true, allowEditing: false, enableTooltip: true, enableMaxHeight: true, enableIndicator: false, 

          fields: { subject: { title: 'Conference Name', name: 'Subject' }, description: { title: 'Summary', name: 'Description' }, startTime: { title: 'From', name: 'StartTime' }, endTime: { title: 'To', name: 'EndTime' } } }} group={{ allowGroupEdit: false, resources: ['Conferences'] }}>

            <ResourcesDirective>

              <ResourceDirective field='ConferenceId' title='Attendees' name='Conferences' allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

            </ResourcesDirective>

            <ViewsDirective>

              <ViewDirective option='Day'/>

            </ViewsDirective>

            <Inject services={[Day, WorkWeek, Month, TimelineViews, Resize, DragAndDrop]}/>

          </ScheduleComponent>

We have created a separate forum for this query. Please follow the below forum for further details.

https://www.syncfusion.com/forums/187137/schedule-event-customization-from-187124

Regards,
Ashok

[MP]

Thanks Ashok but the sample and the code still have the same problem for delete even after setting to property to false. 

[MP]

Hello Team, 

I was able to load the data from DB, however the onCellClick piece got broke now as I don't have any reference to scheduleObj now.. 

const resourceDataQuery = useQuery({

queryKey: ["allresources"],

queryFn: () =>

fetch("calling to load resources get call").then(

(res) => res.json()

),

});

const reservationDataQuery = useQuery({

queryKey: ["allreservations"],

queryFn: () =>

fetch("calling to call reservations /// get call").then(

(res) => res.json()

),

});

const onCellClick = (args) => {

let count = 0;

// debugger;

console.log('args', args)

console.log('args', args)

args.cancel = true;

var today = new Date(args.startTime);

const endTime = today.setHours(today.getHours() + 1);

//const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.ConferenceId

// console.log('getGroupId', getGroupId)

count = count + 1

let eventData = {

Subject: "event-" + count,

StartTime: args.startTime,

EndTime: new Date(endTime),

IsAllDay: args.isAllDay,

ConferenceId: "16d9bcc8-ae83-4b7b-85ae-8eddc0ff85e5"

};

//console.log("<><><>", !scheduleObj.current.isSlotAvailable(args.startTime, endTime));

args.cancel = true

console.log('eventData', eventData)

reservationDataQuery.data.current.addEvent(eventData);

}

<ScheduleComponent timezone={"America/Chicago"} cssClass='group-editing' width='100%' height='650px'

endHour='23:00' timeScale={ {interval: 60, slotCount: 2}}

startHour='9:00' selectedDate={new Date(2021, 2, 7)} cellClick={onCellClick}

eventSettings={{ dataSource: data, ignoreWhitespace: false, allowEditing: false,

enableTooltip: true, enableMaxHeight: true, enableIndicator: false,

fields: { subject: { title: 'Conference Name', name: 'Subject' },

description: { title: 'Summary', name: 'Description' }, startTime: { title: 'From', name: 'StartTime' }, endTime: { title: 'To', name: 'EndTime' } } }}

group={{ allowGroupEdit: false, resources: ['Conferences'] }}>

<ResourcesDirective>

<ResourceDirective field='ConferenceId' title='Attendees' name='Conferences'

allowMultiple={true} dataSource={resourceData} textField='Text' idField='Id' colorField='Color'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

<Inject services={[Day, TimelineViews, Resize, DragAndDrop]}/>

</ScheduleComponent>

[MP]

Any update here pls?

[Ashokkumar Karuppasamy]

Hi MP,

Still have the same problem for delete even after setting to property to false.

Sorry for the inconvenience. You can resolve this by setting the allowGroupEdit property to false. The attached code demonstrate the solution. Please let us know if you need any further assistance.

     group={{ allowGroupEdit: false, resources: ['Conferences'] }}

I was able to load the data from DB, however the onCellClick piece got broke now as I don't have any reference to scheduleObj now.

If you have the schedule reference, you can use the shared code snippet below to obtain the schedule reference

Sample: https://stackblitz.com/edit/react-fptybz-tpwji7?file=index.js,datasource.json

  

  const scheduleObj = useRef(null);

  const data = extend([], dataSource.resourceConferenceData, null, true);

 

 

<ScheduleComponent

            ref={scheduleObj}

            cssClass="group-editing"

            width="100%"

            endHour="23:00"

            startHour="9:00"

            height="650px"

            selectedDate={new Date(2021, 5, 5)}

            currentView="WorkWeek"

            cellClick={onCellClick}

 

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with additional information about your scenario or replicate the issues sample This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok

[MP]

I get undefined now for conferenceId since scheduleObj.current is undefined. 

const scheduleObj = useRef(null);

const { error: resError, data: resData, loading: resLoading }= useQuery({

queryKey: ["allreservations"],

queryFn: () =>

fetch("call resource").then(

(res) => res.json()

),

});

const reservationData = extend([], resData, null, true);

const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.ConferenceId

[MP]

conferenceId is working as expected. however when the onCellClick event is completed I don't see the event on the calendar 

const onCellClick = (args) => {

let count = 0;

// debugger;

// console.log('args', args)

args.cancel = true;

console.log('scheduleObj', scheduleObj.current)

var today = new Date(args.startTime);

const endTime = today.setHours(today.getHours() + 1);

// console.log('startTime', today)

//console.log('endTime', endTime)

const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.conferenceId

console.log('getGroupId', getGroupId)

count = count + 1

let eventData = {

Subject: "event-" + count,

StartTime: args.startTime,

EndTime: new Date(endTime),

IsAllDay: args.isAllDay,

ConferenceId: getGroupId

};

//console.log("<><><>", !scheduleObj.current.isSlotAvailable(args.startTime, endTime));

console.log('eventData', eventData)

scheduleObj.current.addEvent(eventData);

}

<ScheduleComponent ref={scheduleObj} timezone={"America/Chicago"} cssClass='group-editing' width='100%' height='650px' startHour='7:00'

endHour='24:00'

timeScale={ {interval: 60, slotCount: 2}}

selectedDate={new Date(2024, 2, 1)} eventClick={onEventClick} cellClick={onCellClick}

eventSettings={{ dataSource: reservationData, ignoreWhitespace: false, allowEditing: false,

enableTooltip: true, enableMaxHeight: true, enableIndicator: false,

fields: {

subject: { title: 'Conference Name', name: 'reservationName' },

description: { title: 'Summary', name: 'Description' },

startTime: { title: 'From', name: 'reservationCheckIn' },

endTime: { title: 'To', name: 'reservationCheckOut' } } }}

group={{ allowGroupEdit: false, resources: ['Conferences'] }}>

<ResourcesDirective>

<ResourceDirective field='conferenceId' title='Attendees' name='Conferences'

allowMultiple={true} dataSource={resourcedata}

textField='resourceName' idField='resourceId' colorField='resourceColor'/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option='Day'/>

</ViewsDirective>

<Inject services={[Day, TimelineViews, Resize, DragAndDrop]}/>

</ScheduleComponent>

[MP]

no worries, I was able to get the event on the calendar. Thanks again for all the help.

[Ashokkumar Karuppasamy]

Hi MP,

We're glad to hear that the solution worked for you! If you have any more questions in the future, don't hesitate to ask.

Best regards,

Ashok

[MP]

Thanks Ashok. Delete is stoll not working. 

[Ashokkumar Karuppasamy]

Hi MP,

The event deletion is based on the ID value, but we suspect the new event might not generate an ID. Therefore, you may encounter issues. Please add the ID value in the code snippet provided below for reference. Please try this solution and let us know if any further assistance is needed.

Sample: https://stackblitz.com/edit/react-fptybz-yvznkw?file=index.js,index.html

const onCellClick = (args) => {

      args.cancel = true;

      const getGroupId = scheduleObj.current.getResourcesByIndex(args.groupIndex).groupData.ConferenceId

      count = count + 1

      let eventData = {

        id: scheduleObj.current.eventsData.length + 1,

        Subject: "event-" + count,

        StartTime: args.startTime,

        EndTime: args.endTime,

        IsAllDay: args.isAllDay,

        ConferenceId: getGroupId

      };

      scheduleObj.current.addEvent(eventData);

    }

 

Regards,
Ashok

[MP]

Still not working. The problem I see is when you try to delete the event it mutates the object and deletes the wrong id. Technically it not doesn't generate the new object on your side. Your example doesn't work either. 

[Swathi Ravi]

Hi  MP,

Based on your inquiry, we understand that when you attempted to delete one event, it deleted another one instead. The issue arises when all events have the same ID. Since you are using shared events, they will have the same ID. In our previous shared sample, we rendered events with different IDs and successfully achieved the delete process. To proceed further, could you please provide the following details? This would be more helpful to validate and provide you with a better solution:

1. Runnable Sample  demonstrating the issue replication.
2. Video demonstration replicating the issue.
3. Did you manually perform the delete operation using the deleteEvent method or the popup delete button?

Regards,

Swathi Ravi