[INFO REQ] Event is disappearing after clicking save button

[sheetalveer]

Hi Team,
I am evaluating “Bryntum Scheduler” to use as Custom Schedule Board for Microsoft Dynamics 365 CRM.
I have customized Event Editor to show one field. Attaching screenshot.
Following is my code:

eventEdit: {
                editorConfig: {
                    items: [{ type: "text", label: "Warning", clearable: true, name: "warningMsg", ref: "warningField" }],
                    title: "Set Warning"                     
                }
},

After clicking on save button, event is disappearing from scheduler. After refreshing page, it appears. Kindly suggest.

Also, when we right click on any event, we usually get "Edit Event" & "Delete Event" option. I want to rename "Edit Event" to "Flag" & hide "Delete Event". Kindly suggest how I can achieve this.

[pmiklashevich]

Hello,

This happens because you overrode our default items with yours. We expect time fields to be always there, so if you check the console, you should see exception there:

EventEdit.js:488 Uncaught TypeError: Cannot set property 'step' of undefined
    at EventEdit.internalShowEditor (EventEdit.js:488)
    at EventEdit.editEvent (EventEdit.js:541)
    at EventEdit.onActivateEditor (EventEdit.js:849)
    at Scheduler.trigger (Events.js:842)
    at Scheduler.handleScheduledBarEvent (TimelineDomEvents.js:97)
    at HTMLDivElement.handler (EventHelper.js:454)

Since you don't need any of our fields, it's better to implement your own editor, for example:
1. Disable eventEdit feature
2. Subscribe to eventDblClick
3. Show Popup
In the popup you can show your text field and buttons to save/cancel changes.
4. Configure context menu items the way you need. Add a new flag item, edit item will be missing since eventEdit feature is disabled, delete item has to be configured as false.

Here is for example how you can implement your custom event name editor:

function flagEvent({ eventRecord, event }) {
    const popup = new Popup({
        closeAction : 'destroy',
        anchor      : true,
        forElement  : event.target,
        items       : [
            {
                type  : 'text',
                ref   : 'eventNameField',
                value : eventRecord.name
            },
            {
                type    : 'button',
                text    : 'Save',
                flex    : 1,
                color   : 'b-green',
                onClick : () => {
                    eventRecord.name = popup.widgetMap.eventNameField.value;
                    popup.close();
                }
            },
            {
                type    : 'button',
                text    : 'Cancel',
                flex    : 1,
                onClick : () => {
                    popup.close();
                }
            }
        ]
    });
}

const scheduler = new Scheduler({
    features : {
        eventEdit        : false,
        eventContextMenu : {
            items : {
                flagItem : {
                    text   : 'Flag',
                    icon   : 'b-icon b-fa-flag',
                    weight : -200,
                    onItem : flagEvent
                },
                deleteEvent : false
            }
        }
    },
    listeners : {
        eventdblclick : flagEvent
    },

You can copy this code to Basic demo to see how it works:

Снимок экрана 2020-05-06 в 12.24.49.png (39.75 KiB) Viewed 1511 times

Instead of name editor, you can use your "warning" field. Please make sure this field is defined on your data model. Though autoExposeFields works, if the first record won't have your warning field, it won't be created automatically.

Best regards,
Pavel

[pmiklashevich]

UPDATE!

Thinking of the idea of editing, you might want to interact with all 'start edit' places. For that you need to:
1. Subscribed to beforeEventEdit
2. Open your editor
3. Return false to prevent our editor from being shown
4. On save expect that eventRecord could be a new event (for example created using drag-create). In this case assign it to resource and add to the store
5. "Edit Event" context menu itenm is added by EventEdit feature. The text is localizable, so you can extend our locales, and override corresponding key. Please see localization guide: https://www.bryntum.com/docs/scheduler/#guides/customization/localization.md
and localization demo: https://bryntum.com/examples/scheduler/localization/

For example:

LocaleManager.extendLocale('En', {
    EventEdit : {
        'Edit Event' : 'Flag'
    }
});

function flagEvent({ source : scheduler, resourceRecord, eventRecord, eventElement }) {
    const popup = new Popup({
        closeAction : 'destroy',
        anchor      : true,
        forElement  : eventElement,
        items       : [
            {
                type  : 'text',
                ref   : 'eventNameField',
                value : eventRecord.name
            },
            {
                type    : 'button',
                text    : 'Save',
                flex    : 1,
                color   : 'b-green',
                onClick : () => {
                    eventRecord.name = popup.widgetMap.eventNameField.value;
                    // in case you drag create an event
                    if (!scheduler.eventStore.includes(eventRecord)) {
                        eventRecord.resourceId = resourceRecord.id;
                        scheduler.eventStore.add(eventRecord);
                    }
                    popup.close();
                }
            },
            {
                type    : 'button',
                text    : 'Cancel',
                flex    : 1,
                onClick : () => {
                    popup.close();
                }
            }
        ]
    });
}

const scheduler = new Scheduler({
    features : {
        eventContextMenu : {
            items : {
                deleteEvent : false
            }
        }
    },
    listeners : {
        beforeEventEdit : (params) => {
            // open custom editor
            flagEvent(params);
            // prevent our editor from being shown
            return false;
        }
    },

Cheers!