[REACT] How to disable "+Add event"

[14165@ramco.com]

Hi there,

Here i need to disable AddEvent at the time of right in scheduler.I referred on document and tried one method.but thats not for me.

Code which i used:

<BryntumScheduler
                    ref={bryntumRef}
                    resources={showTripLeg ? triplegViewData : tripViewData}
                    events={showTripLeg ? triplegEventData : tripEventData}
                    startDate={calendar.startOf("day").toDate()}
                    endDate={calendar.endOf("day").toDate()}

                autoHeight={false}
                rowHeight={40}
                height={400}
                barMargin={10}
                // resourceImagePath={'users/'}
                multiEventSelect={true}
                eventDragSelectFeature={true}
                eventDragCreateFeature={false}
                panFeature={false}
                selectionMode={{
                    showCheckAll: true,
                    rowCheckboxSelection: true,
                    cell: true
                }
                }
                listeners={{
                    beforeEventDrag: beforeDragTrip,
                    selectionChange: handleCellSelection,
                    afterEventDrop: handleTripLegExecution,
                    myCustom: (event: any) => {
                        event.deselectAll()
                    },

                }}



                columns={[
                    {
                        text: 'Trip',
                        field: 'resourceInfo',
                        showRole: 'category',
                        showImage: false,
                        width: 130,
                        cls: 'titleColumn',
                        // renderer:(e: any)=>{
                        //    // console.log("rendererer",e.rowElement.className)
                        //    const dummy = e.value.split(" ",1)
                        //     if(e.value === "TP0001"){
                        //         e.rowElement.className = "b-grid-row b-disable"
                        //     }
                        //     console.log("rendererer",e)

                        // }
                    },
                    {
                        type: 'action',
                        text: '',
                        actions: [{
                            cls: 'b-fa b-fa-truck',
                            tooltip: 'Resources for the trip',
                            visible: true,
                            onClick: (record: any) => {
                                const id = record.record.data.selectedtripid
                               //const id : any=["d"]
                                console.log("recorddata::",ref_disable_trip.current," id",id)
                                if (record.record.data.tripPlanId === "New" ) {
                                    return
                                }
                                else if( ref_disable_trip.current.includes(id)){
                                    AlertService.showErrorMsg("This Data is already cancelled or deleted ")
                                    return
                                }
                                else {
                                    OpenResourcesTripDialog(record);
                                }
                            }
                        }]
                    },
                    {
                        text: 'Start',
                        field: 'start',
                        width: 130,
                        cls: 'titleColumn'
                    },
                    {
                        text: 'End',
                        field: 'End',
                        width: 130,
                        cls: 'titleColumn'
                    }
                ]}

                eventStore={{
                    listeners: {
                    }
                }
                }

                eventRenderer={(events: any) => { events.renderData.height = 20; events.renderData.style = "vertical-align:middle" }}

                eventMenuFeature={eventContextMenu}
                cellMenuFeature={cellContextMenu}
            />

Code for eventMenuFeature:

var eventContextMenu = {
        

    items: {
        deleteEvent: false,
        editEvent: false,
        addEvent: false,
        View: {
            text: 'View',
            cls: 'my-menu-item',
            onItem: (data: any) => {


                DDpopUpData(data.eventRecord.data.tripPlanId, data.eventRecord.data.legId)

                OpenDispatchDocumentSummaryDialog();
            }
        },
        Remove: {

            text: 'Remove',
            onItem: (data: any) => {
                console.log("event data::::data", data)
                // dispatch trip_leg_excution (DELETE)
                const { legId, resourceId, tripPlanId } = data.eventRecord.originalData;
                const payload = {
                    legId,
                    resourceId,
                    tripPlanId,
                    tripData: state.main_state.tripplan.filter((el: any) => {
                        return el.TripPlanID === tripPlanId;
                    })
                }

                // setTripPlanNo(tripPlanId)
                // let tripDataOutput:any=[];
                //  tripDataOutput= state.main_state.tripplan.filter((el: any) => {
                //     return el.TripPlanID === payload.tripPlanId;
                //  })


                // tripDataOutput = payload.tripData;
                console.log("remove payload data", payload);
                // console.log("remove payload output",tripDataOutput);
                dispatch({ type: 'EXECUTE_TRIP_LEG_EXECUTION_REMOVE', payload })
            }
        },
        AddTrip: {
            text: 'Add to New Trip',
            cls: 'my-menu-item',
            onItem: (data: any) => {
                console.log("event data::::data", data)
                // dispatch trip_leg_excution (DELETE)
                const { legId, tripPlanId } = data.eventRecord.originalData;
                const targetTripID: any = "New Trip";


                const payload = {
                    TargetTripID: targetTripID,
                    BackToID: ref_BackTo.current,
                    ShippointID: ref_ShipTo.current,
                    IsPlanPreloadLeg: ref_PrepLoad.current,
                    IsBackhaul: ref_BackHaul.current,
                    IsPlanforPrimemover: ref_PrimeMover.current,
                    legId,
                    tripPlanId,
                    tripData: state.main_state.tripplan.filter((el: any) => {
                        return el.TripPlanID === tripPlanId;
                    })
                }




                // tripDataOutput = payload.tripData;
                console.log("remove payload data", payload);
                //console.log("remove payload output",tripDataOutput);

                dispatch({ type: 'EXECUTE_TRIP_LEG_EXECUTION_ADD', payload })
            }
        }
    }
}

[mats]

Please read this guide: https://bryntum.com/docs/scheduler/#guides/customization/contextmenu.md

const scheduler = new Scheduler({
    features : {
        eventMenu : {
            items : {
                // Remove "Edit event" item provided by EventEdit feature
                editEvent : false
            }
        },
        scheduleMenu : {
            items : {
                // Remove "Add event" default item
                addEvent : false
            }
        },
        timeAxisHeaderMenu : {
            items : {
                // Remove "Filter tasks" item provided by EventFilter feature
                eventsFilter : false
            }
        }
    }
});

[14165@ramco.com]

Hi,

I added below line in BryntumScheduler component.But now also it is not disabling.And can u please more specific in React

 scheduleMenuFeature={scheduleMenu}

 var scheduleMenu = {
        items: {
            addEvent: false,
        }
    }

[pmiklashevich]

For example Scheduler/examples/frameworks/react/javascript/simple/src/App.js

Case 1: you disable the addEvent and since there is no any other menu items, the menu is not shown. You can see default browser menu implementation.

            <Scheduler
                {...schedulerConfig}
                scheduleMenuFeature={{ items : {
                    addEvent : false
                }}}

Case 2: you disable the addEvent but add a new item. Then the menu is shown with the new item. You can click on the "Foo" and see "Clicked!" in console.

            <Scheduler
                {...schedulerConfig}
                scheduleMenuFeature={{ items : {
                    addEvent : false,
                    test : { text : 'foo', onItem : () => console.log('Clicked!')}
                }}}

Note, you can add the config to the "schedulerConfig". The values are spread to properties of the Scheduler component