How to add onChange event to dropdown control in event calendar editor

Event Calendar
#1

I have a requirement where I need to call an API to select value from a dropdown list on change of another dropdown list present in the editor.

#2

Hello,

There isn’t a built-in method to directly achieve this, but you can implement the functionality using the focusout event to track changes in the first dropdown. Based on the selected value, you can then update the options of the second dropdown using the update method:

const eventCalendarInstance = new eventCalendar.EventCalendar('#root', {
	editorShape: editorShape1,
  	...
});

function updateUsersBasedOnTaskType(shape, selectedType) {
    const updatedShape = shape.map(field => {
        if (field.key === 'users') {
            const options = selectedType === 'Type 2' ? newUsers : users;
            
            return { ...field, options };
        }

        return field;
    });

    return updatedShape
}

eventCalendarInstance.api.on('edit-event', (obj) => {
    setTimeout(() => {
        const formContainer = document.querySelector('.wx-event-calendar-editor-form');

        if (formContainer) {
            const comboInput = document.querySelector('#combo_task_type');
            comboInput.addEventListener('focusout', () => {
                const newShape = updateUsersBasedOnTaskType(editorShape1,comboInput.value)
                eventCalendarInstance.form.update(() => newShape )
            });
        }
    }, 0);
});

Please see an example: DHTMLX Snippet Tool