[VUE 2] How to change the details of the default record dynamically when double clicked?

[Srindt]

When I try to create a new event by double clicking, I get the Event Editor dialog which I used to update with my data and add a event.

But based on my business logic, I would like to pre-fill different default record data when we double click to add an event.

i.e say I double click and now I want to show a different name,equipments, different end-date/time.

I tried to use beforeEventEditShow, and I tried to

change the enddate/time using the eventRecord, editor arguments as shown below.

        beforeEventEditShow({ eventRecord, editor }) {
        

            let sd =  new Date(eventRecord.startDate);
            let ed =  new Date(eventRecord.startDate);
            ed.setHours(sd.getHours() + 2);
            //APPROACH 1
            eventRecord.record.startDate = sd;
            eventRecord.record.endDate = ed;
            
            //APPROACH 2
            editor.record.startDate = sd;
            editor.record.endDate = ed;
    }

When I print, i see the updated values, but in the EventEditor window, it is showing the default endDate and not my endDate.

Kindly give some inputs to solve this issue.

[alex.l]

You have to set data to editor fields instead:

    listeners : {
        beforeEventEditShow({ eventRecord, editor }) {
           const { nameField, equipmentField } = editor.widgetMap; // there nameField and equipmentField are names of fields 
           nameField.vale = 'Custom name';
           equipmentField.value = 'Some data';

    }
},

[Srindt]

Thanks Alex, I'm able to change the value in the editor.

I changed my endDate to be just startDate + 2 hours.

Even though in the editor, it shows the given values, the default event drawn in the Scheduler(when you double click) doesn't obey my editor values.

What should be done such that the default event shown is also according to the endDate which I'm setting to the
editor(which is. startDate + 2hrs)?

[alex.l]

I guess better to use https://bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit#event-beforeEventEdit
event to achieve your goal:

const scheduler = new Scheduler({
    // ...
    

listeners : {
    beforeEventEdit({ eventRecord }) {
        let sd =  new Date(eventRecord.startDate);
        let ed =  new Date(eventRecord.startDate);
        ed.setHours(sd.getHours() + 2);
        
        eventRecord.startDate = sd;
        eventRecord.endDate = ed;
    }
},

In that case no need to change values in editor fields, the updated values will be used.

[Srindt]

Thanks for the reply Alex!

I used drag-onto-tasks sample with the below changes:

1.I checked with both day,week view presets.

2.Used your beforeEventEdit snippet.

Even though the editor shows an end date of +2 hours (which is correct!), the event which gets shown by default when double clicked will still show 1 hr for day mode and 1 day viewpreset for week viewpreset.

I have shared my project and associated snippets.

Kindly have a look and let me know how shall I be able to show correct duration for my default event.

Files Link: https://drive.google.com/file/d/1ttfKesiDYTxT4oFm7Eoz3vGlFRj7y-gO/view?usp=sharing

[arcady]

For event adding you should use https://www.bryntum.com/docs/scheduler-pro/#Scheduler/view/SchedulerBase#event-beforeEventAdd event.

[Srindt]

Thanks for the reply arcady!

I tried with beforeEventAdd instead of beforeEventEdit, but its still the same.

[arcady]

try this:

        return {
            schedulerConfig,
            gridConfig,
            listeners : {
                beforeEventAdd({ eventRecord }) {
                    // changing the newly added event duration to 4 days and adjust endDate respectively
                    eventRecord.set({
                        duration     : 4,
                        durationUnit : 'day',
                        endDate      : DateHelper.add(eventRecord.startDate, 4, 'day')
                    });
                },
            },
        };

[Srindt]

Hi Arcady,

Unfortunately the above snippet doesn't allow Editor Window to pop up even and when double clicked, the event is being shown and embedded into the scheduler without the event editor window

[alex.l]

Checked in Scheduler basic example. Works well for me. Check the console, any errors in there?
Please post your code, we will have a look!

Here is the code I used.

const scheduler = new Scheduler({
    appendTo         : 'container',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

columns : [
    { text : 'Name', field : 'name', width : 130 }
],

listeners : {
    beforeEventAdd({ eventRecord }) {
        // changing the newly added event duration to 4 days and adjust endDate respectively
        eventRecord.set({
            duration     : 4,
            durationUnit : 'day',
            endDate      : DateHelper.add(eventRecord.startDate, 4, 'day')
        });
    },
}
});