[REACT] Deleting an occurrence of a recurring series

Post by **kirsten** » Thu Feb 22, 2024 10:56 pm

Hi there!

Is there a setting I need to configure to allow deleting an occurrence of a recurring event series? (I'm looking at https://bryntum.com/products/scheduler/examples/recurrence/, which has the behavior I want.)

I'm seeing the following behavior:

the first event in the recurring series shows a "Delete" button when I double click to edit

subsequent events (occurrences) do not show the "Delete" button when I double click to edit

The events appear on the correct dates/times according to the rrule string I am providing, so I think that part is correct.

In props, we have enableRecurringEvents set to true.

Any ideas why this might be happening? Happy to share more relevant config as well.

Post by **marcio** » Thu Feb 22, 2024 11:14 pm

Hey kirsten,

Thanks for reaching out.

So, there is no extra setting to configure to allow deleting an occurrence of a recurring event series. As you can see in the demo, delete buttons appear for all of the events.

Would be possible to share a sample project with your configuration for us to debug and check why that delete button is not being displayed? You can get more info regarding that by checking our guidelines https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Post by **kirsten** » Fri Feb 23, 2024 12:53 am

Hi Marcio, thanks for responding!

Here's the props we are passing into the BryntumSchedulerPro component. (It's actually a subset of props - I've commented a few things out that I didn't think were relevant and the problem still occurs.)

const schedulerProProps = {
    timeZone,
    barMargin: 8,
    rowHeight: 60,
    autoHeight: true,
    eventStyle: 'colored',
    enableRecurringEvents: true,
    project: {
      autoLoad: true,
      autoSync: true,
      encode: (request) => {
        return JSON.stringify(request)
      },
      decode: (response) => {
        return JSON.parse(response)
      },
      phantomIdField: 'PhantomId',
      eventStore: new EventStore(),
      resourceStore: new ResourceStore(),
      assignmentStore: new AssignmentStore(),
      transport: {
        load: {
          url: '/server-url',
          method: 'POST',
          paramName: 'data',
          body: JSON.stringify({
            // graphql query
          }),
        },
        sync: {
          url: '/server-url',
          method: 'POST',
          paramName: 'data',
          body: JSON.stringify({
            // graphql query
          }),
        },
      },
      listeners: {
        beforeSend: async ({ requestConfig, params }) => {
          const token = await getToken()
          requestConfig.headers = {
            'Content-Type': 'application/json',
            Authorization: 'token',
          }
          requestConfig.body = JSON.stringify({
            ...JSON.parse(requestConfig.body),
            moreStuff: JSON.parse(params.data),
          })
        },
      },
    },
    startDate: new Date(),
    eventLayout: 'stack',
    viewPreset: {
      defaultSpan: 24,
      mainUnit: 'hour',
      shiftUnit: 'day',
      base: 'hourAndDay',
    },
    dependenciesFeature: false,
    eventEditFeature: {
      items: {
        effortField: false,
        durationField: false,
        percentDoneField: false,
      },
    },
    headerZoomFeature: false,
    taskEditFeature: false,
    timeAxisHeaderMenuFeature: {
      items: {
        dateRange: true,
        showCurrentTimeLine: true,
      },
    },
    timeRangesFeature: false,
    columns: [
      {
        type: 'resourceInfo',
        width: 150,
        showEventCount: false,
      },
    ],
  }
}

And here's a sample payload. I wonder if there is something wrong here, since

{
            "success": true,
            "resources": {
                "rows": [
                    {
                        "id": "6e828ecb-c13d-4e93-97d9-2723d1c82940",
                        "name": "Resource A",
                        "iconCls": null,
                        "image": false
                    },
                    {
                        "id": "83025877-1b3f-4442-97b7-3e327d73d93a",
                        "name": "Resource B",
                        "iconCls": null,
                        "image": false
                    },
                    {
                        "id": "a00dfc8b-de44-416e-9764-2d3fb08b4b22",
                        "name": "Resource C",
                        "iconCls": null,
                        "image": false
                    },
                    {
                        "id": "66a9b00e-ca15-41c7-9757-1678052c47f8",
                        "name": "Resource D",
                        "iconCls": null,
                        "image": false
                    }
                ]
            },
            "events": {
                "rows": [
                    {
                        "id": "e9115adc-cef0-41e4-bf17-7335ede09d23",
                        "name": "task 1",
                        "startDate": "2024-02-22T12:00:00.000Z",
                        "endDate": "2024-02-22T15:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "ca5ed926-7cfb-4b01-a588-946f97c3cf80",
                        "name": "lunch",
                        "startDate": "2024-02-22T15:00:00.000Z",
                        "endDate": "2024-02-22T16:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "59833a23-28fb-4ca9-a35f-813be88442cf",
                        "name": "task 2",
                        "startDate": "2024-02-22T16:00:00.000Z",
                        "endDate": "2024-02-22T21:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "7af47107-5971-4eab-8bc6-89158da2c64f",
                        "name": "task 3",
                        "startDate": "2024-02-22T11:00:00.000Z",
                        "endDate": "2024-02-22T12:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "111fd9c9-e32c-40ed-abaf-2f8c59081656",
                        "name": "task 4",
                        "startDate": "2024-02-22T12:00:00.000Z",
                        "endDate": "2024-02-22T15:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "88300d97-e07f-4bb6-b704-6f25554b6195",
                        "name": "task 5",
                        "startDate": "2024-02-22T15:00:00.000Z",
                        "endDate": "2024-02-22T16:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "45e31d41-99e1-4a1d-87ea-890ecd5f001a",
                        "name": "task 6",
                        "startDate": "2024-02-22T16:00:00.000Z",
                        "endDate": "2024-02-22T21:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "blue",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "b0ad6638-9722-43ab-b807-1dc3db3a7dd3",
                        "name": "task 7",
                        "startDate": "2024-02-22T14:00:00.000Z",
                        "endDate": "2024-02-22T15:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "76a776eb-83ce-4457-a718-beb6ae4188e6",
                        "name": "task 8",
                        "startDate": "2024-02-22T15:00:00.000Z",
                        "endDate": "2024-02-22T19:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "1ddfd8c1-51b2-4646-953b-e91d86fa4ed0",
                        "name": "lunch",
                        "startDate": "2024-02-22T19:00:00.000Z",
                        "endDate": "2024-02-22T20:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "3305c335-98d2-4673-aaee-67446e280a61",
                        "name": "task 9",
                        "startDate": "2024-02-22T20:00:00.000Z",
                        "endDate": "2024-02-23T00:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "blue",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "1d7a0843-9d74-4ab6-9f62-aa2eb1aab90e",
                        "name": "task 10",
                        "startDate": "2024-02-22T17:00:00.000Z",
                        "endDate": "2024-02-22T18:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "b9d2ac09-e8de-41d2-9d57-7d9d34766a48",
                        "name": "task 11",
                        "startDate": "2024-02-22T18:00:00.000Z",
                        "endDate": "2024-02-22T21:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "572b9c4c-933e-4be8-b681-fcca612b9b59",
                        "name": "lunch",
                        "startDate": "2024-02-22T21:00:00.000Z",
                        "endDate": "2024-02-22T22:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "b18df9bb-1273-45fb-9f1c-70936350f6c8",
                        "name": "task 12",
                        "startDate": "2024-02-22T22:00:00.000Z",
                        "endDate": "2024-02-23T03:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "violet",
                        "recurrenceRule": "FREQ=DAILY;INTERVAL=1"
                    },
                    {
                        "id": "cbe61317-da89-4b4e-9343-f79501112d39",
                        "name": "vacation",
                        "startDate": "2024-02-22T22:00:00.000Z",
                        "endDate": "2024-02-23T00:00:00.000Z",
                        "iconCls": "b-fa b-fa-calendar",
                        "eventColor": "gray",
                        "recurrenceRule": "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR"
                    }
                ]
            },
            "assignments": {
                "rows": [
                    {
                        "id": "e9115adc-cef0-41e4-bf17-7335ede09d23",
                        "event": "e9115adc-cef0-41e4-bf17-7335ede09d23",
                        "resource": "6e828ecb-c13d-4e93-97d9-2723d1c82940"
                    },
                    {
                        "id": "ca5ed926-7cfb-4b01-a588-946f97c3cf80",
                        "event": "ca5ed926-7cfb-4b01-a588-946f97c3cf80",
                        "resource": "6e828ecb-c13d-4e93-97d9-2723d1c82940"
                    },
                    {
                        "id": "59833a23-28fb-4ca9-a35f-813be88442cf",
                        "event": "59833a23-28fb-4ca9-a35f-813be88442cf",
                        "resource": "6e828ecb-c13d-4e93-97d9-2723d1c82940"
                    },
                    {
                        "id": "7af47107-5971-4eab-8bc6-89158da2c64f",
                        "event": "7af47107-5971-4eab-8bc6-89158da2c64f",
                        "resource": "83025877-1b3f-4442-97b7-3e327d73d93a"
                    },
                    {
                        "id": "111fd9c9-e32c-40ed-abaf-2f8c59081656",
                        "event": "111fd9c9-e32c-40ed-abaf-2f8c59081656",
                        "resource": "83025877-1b3f-4442-97b7-3e327d73d93a"
                    },
                    {
                        "id": "88300d97-e07f-4bb6-b704-6f25554b6195",
                        "event": "88300d97-e07f-4bb6-b704-6f25554b6195",
                        "resource": "83025877-1b3f-4442-97b7-3e327d73d93a"
                    },
                    {
                        "id": "45e31d41-99e1-4a1d-87ea-890ecd5f001a",
                        "event": "45e31d41-99e1-4a1d-87ea-890ecd5f001a",
                        "resource": "83025877-1b3f-4442-97b7-3e327d73d93a"
                    },
                    {
                        "id": "b0ad6638-9722-43ab-b807-1dc3db3a7dd3",
                        "event": "b0ad6638-9722-43ab-b807-1dc3db3a7dd3",
                        "resource": "a00dfc8b-de44-416e-9764-2d3fb08b4b22"
                    },
                    {
                        "id": "76a776eb-83ce-4457-a718-beb6ae4188e6",
                        "event": "76a776eb-83ce-4457-a718-beb6ae4188e6",
                        "resource": "a00dfc8b-de44-416e-9764-2d3fb08b4b22"
                    },
                    {
                        "id": "1ddfd8c1-51b2-4646-953b-e91d86fa4ed0",
                        "event": "1ddfd8c1-51b2-4646-953b-e91d86fa4ed0",
                        "resource": "a00dfc8b-de44-416e-9764-2d3fb08b4b22"
                    },
                    {
                        "id": "3305c335-98d2-4673-aaee-67446e280a61",
                        "event": "3305c335-98d2-4673-aaee-67446e280a61",
                        "resource": "a00dfc8b-de44-416e-9764-2d3fb08b4b22"
                    },
                    {
                        "id": "1d7a0843-9d74-4ab6-9f62-aa2eb1aab90e",
                        "event": "1d7a0843-9d74-4ab6-9f62-aa2eb1aab90e",
                        "resource": "66a9b00e-ca15-41c7-9757-1678052c47f8"
                    },
                    {
                        "id": "b9d2ac09-e8de-41d2-9d57-7d9d34766a48",
                        "event": "b9d2ac09-e8de-41d2-9d57-7d9d34766a48",
                        "resource": "66a9b00e-ca15-41c7-9757-1678052c47f8"
                    },
                    {
                        "id": "572b9c4c-933e-4be8-b681-fcca612b9b59",
                        "event": "572b9c4c-933e-4be8-b681-fcca612b9b59",
                        "resource": "66a9b00e-ca15-41c7-9757-1678052c47f8"
                    },
                    {
                        "id": "b18df9bb-1273-45fb-9f1c-70936350f6c8",
                        "event": "b18df9bb-1273-45fb-9f1c-70936350f6c8",
                        "resource": "66a9b00e-ca15-41c7-9757-1678052c47f8"
                    },
                    {
                        "id": "cbe61317-da89-4b4e-9343-f79501112d39",
                        "event": "cbe61317-da89-4b4e-9343-f79501112d39",
                        "resource": "6e828ecb-c13d-4e93-97d9-2723d1c82940"
                    }
                ]
            }
        }

}

Does anything in the response or config jump out to you? If not I can work on creating a sample project

Post by **ghulam.ghous** » Fri Feb 23, 2024 12:59 pm

Hi there,

I have tried integrating your config and data in our vanilla project and it does show delete button for all the the subsequent events. So probably we are gonna need a project where we can reproduce this issue. Please share with us and we will debug it and help you.

Clip: https://drive.google.com/drive/folders/1spuwhqL6HzQOBc7xJ_5KMVZRM6XUSsA5?usp=sharing

Regards,
Ghous

Support Forum

[REACT] Deleting an occurrence of a recurring series