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:
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:
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)