Our powerful JS Calendar component


Post by dfen »

Hello! I am using the BryntumCalendar react component with the 'list' mode enabled.

    "@bryntum/calendar": "5.0.2",
    "@bryntum/calendar-react": "5.0.2",

I would like to run some code when an item (or items) are deleted using the right-click menu there:

Image

My setup is as follows:

  const calendarConfig = {
    date: start,
    dateFormat: 'DD MMM YYYY',
    eventEditFeature: false,
    autoCreate: false,
    crudManager: {
      autoLoad: true,
      eventStore: {
        modelClass: EventStoreModel,
      },
    },
    modes: {
      list: {
        features: {
          cellEdit: {
            triggerEvent: 'cellclick',
          },
        },
        listeners: {
          // catchAll: (args: any) => {
          //   console.log('catchAll', args)
          // },
          rowRemove: (...args: any) => {
            console.log('rowRemove', args)
          },
        },
        columns: [
          {
            field: 'personId',
            text: 'Crew',
            width: '150px',
            renderer: ({ record }: { record: CalendarEventRecord }) => {
              const person = peopleById[record.data.personId]
              return person?.name ?? ''
            },
          },
          {
            field: 'assetId',
            text: 'Asset',
            width: '150px',
            renderer: ({ record }: { record: CalendarEventRecord }) => {
              const asset = record.data.assetId
                ? assetsById[record.data.assetId]
                : undefined
              return asset?.name ?? ''
            },
          },
          {
            field: 'positionId',
            text: 'Position',
            width: '150px',
            renderer: ({ record }: { record: CalendarEventRecord }) => {
              const position = record.data.positionId
                ? positionsData.byKey[record.data.positionId]
                : undefined
              return position?.Name ?? ''
            },
          },
          {
            field: 'startDate',
            text: 'Start',
            type: 'date',
            width: '120px',
            format: 'DD/MM/YYYY',
          },
          {
            field: 'startDate',
            type: 'time',
            text: '',
            format: 'HH:mm',
          },
          {
            field: 'endDate',
            text: 'End',
            type: 'date',
            width: '120px',
            format: 'DD/MM/YYYY',
          },
          {
            field: 'endDate',
            type: 'time',
            text: '',
            format: 'HH:mm',
          },
          {
            field: 'workRestTypeId',
            text: 'Work Rest Type',
            width: '160px',
            renderer: ({ record }: { record: CalendarEventRecord }) => {
              const workRestType = record.data.workRestTypeId
                ? workRestTypesById[record.data.workRestTypeId]
                : undefined
              return workRestType?.name ?? ''
            },
          },
          { field: '', text: 'Job', editor: null },
          { field: 'durationInHours', text: 'Hours', editor: null },
          { field: '', text: 'UDFs' },
        ],
      },
  }

  // Note `listeners` contains a `onDataChange` listener, but it is not triggered when this action is performed.
  return (
    <Fragment>
      <Global styles={globalStyles} />
      <BryntumCalendar
        className="timesheets-calendar"
        style={{ height: '100%' }}
        events={calendarEvents}
        resources={assets}
        {...listeners}
        {...calendarConfig}
      />
    </Fragment>
  )
}

The rowRemove event fires, but, there is no information on which row(s) were removed:

Image

I could perhaps determine the still existing rows somehow from the EventList, but, if the ids of the deleted rows were present in the event that would be helpful. Alternatively if the parent calendar's onDataChange were triggered by delete events in the List mode, I would avoid the onRowRemove listener entirely (the parent onDataChange does trigger when editing rows in the list view, so I would expect it to trigger when removing rows as well)

Any advice is appreciated,
Thanks!

(Adapted from a github issue created here: https://github.com/bryntum/support/issues/4767)


Post by marcio »

Hey,

The onDataChange should be the best approach as you suggested, but there is a bug related to that store update that will be handled here: https://github.com/bryntum/support/issues/4774

For now, I believe that getting the data from the EventList would be the way to work.

Best regards,
Márcio


Post by dfen »

Ok great, thanks!


Post by Animal »

This appears to work in https://bryntum.com/examples/calendar/listview/

Delete "Beer time" in the list and it is gone from the event store.


Post by dfen »

From the comments on https://github.com/bryntum/support/issues/4774 it seems as though the issue was fixed by another change. Looking forward to confirm that in the next release :)


Post by tasnim »

Yes. 5.1.2 is going to be released in a couple of weeks :).


Post Reply