[LWC] Can we use any custom edit component without using standard Editor Config?

[sourav-developer]

Hello Bryntum Team,

We have an Scenario, where we need to use a Custom Defined Lightning Web Component when we click on any Section of Grid section of Calendar/ Grid Section (Adding/ Editing event).

Is there any way invoke function from EventEdit Config from where I can instantiate dynamic component?

[Maxim Gorkovsky]

Hello,

there is an event you could listen to and run your code when event is fired: https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/SchedulerDomEvents#event-eventDblClick

Try smth like:

scheduler.on({ eventDblClick : ({ eventRecord }) => showLWCEditor(eventRecord) })

Also you need to disable eventEdit feature

[sourav-developer]

Hello Maxim,

Thanks for your Response.

Currently I'm using beforeEventEdit event, which is working for me. Here is the code snippet.

this.calendarObject.on('beforeEventEdit', ({eventRecord}) => {
            // Show custom editor here
            // ...
            console.log(JSON.stringify(eventRecord))
            if(eventRecord.id.length === 18) {
                try {
                    console.log("Existing Record")
                    this.handleModal(eventRecord);
                    console.log("After Handle Modal")
                }
                catch (e) {
                    console.error('Error :'+e.message)
                }
            } else {
                console.log("New Record")
            }
            // Prevent built-in editor
            return false;
        });

Is it ok to use beforeEventEdit instead of eventDblClick?

[Animal]

beforeEventEdit event is correct.

Events can be editable from the EventTooltip, from the context menu, or programatically.

Screenshot 2024-07-25 at 14.49.25.png (41.98 KiB) Viewed 304 times

Screenshot 2024-07-25 at 14.48.55.png (42.78 KiB) Viewed 304 times

You want to intercept them all.

[sourav-developer]

Thank you Team for the prompt response, It is currently working.

I've last queries which is not related to this thread! But I'm adding this comment as it is an active thread.

The question is how to get changes from the Calander object?

for Gantt and Scheduler we have the ProjectModel for adding event store and resource stores, and later handle the change from 'onDataReady' event and get data from 'this.configObject.project.changes'.

this.ganttObj.project.on('dataReady', ()=>{
                console.log(JSON.stringify(this.ganttObj.project.changes));
            });

But for Calander object I've used eventStore, and I can not get the same result when trying to get the changes object.

eventStore: {
             data: this. EVENTS
},

[Animal]

It’s all based on exactly the same data package.

If you know how to use Scheduler, you know how to use Calendar.

[sourav-developer]

But Animal,

When Ive used projectModel class for storing Events data on Calendar object the data sets are not populating on weekend.

That is why I've used EventStore to store data on Calendar, which is not applicable for Scheduler. For Scheduler and Gantt I've used ProjectModel which works perfectly.

[Animal]

That sounds very strange. It should work exactly the same as in Scheduler. It's best to use the same setup.

There will always be a Project anyway. It will just create one from the Stores you specify.

If there is a problem with that, we can work through it to see what the issue is. No events showing on weekends? Are all the events passed in the loaded JSON in the store? You an always interrogate the store on the debugger command line.

Are the events being gathered by the view? You can interrogate the view's cellMap which is the data structure which holds data about each date that the view covers.

Screenshot 2024-07-26 at 06.34.02.png (1.1 MiB) Viewed 280 times