I want to handle the click action on the add button when it is in the adaptive UI mode - from 194681

[Phan Hu?nh Nh?t Hùng]

Phan Hu?nh Nh?t Hùng 

Nov 6, 2024 

I have one remaining problem. I want to handle the click action on the add button when it is in the adaptive UI mode. How can I do that

[Vijay Ravi]

Hi Phan,

To enable adaptive mode in the Scheduler, you can set the enableAdaptiveUI property to true. This will switch the Scheduler to adaptive mode, where a "+" icon will be rendered in the Scheduler toolbar. Clicking this icon will display the editor window, allowing users to add events.
 

If you prefer to render a custom button, you can bind a click event to handle the action accordingly. If this does not fully meet your requirements, please provide additional details so we can assist further.

enableAdaptiveUI api: https://ej2.syncfusion.com/react/documentation/api/schedule/#enableadaptiveui
adaptive mode demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/adaptive-grouping

Regards,

Vijay

[Phan Hu?nh Nh?t Hùng]

Hi vijay, your answer is not meet my requirements. I mean I want to handle the action when I click the "+" icon in order to open my custom dialog not the editor window template

[Vijay Ravi]

Hi Phan,

To open a custom dialog only when the plus icon in the Schedule toolbar is clicked, we recommend handling this through the actionBegin event. You can replace the default plus icon with a custom icon and bind a click event to it. This will allow you to trigger the opening of your desired custom dialog according to your specific requirements as shown in the below shared code snippet. Refer the shared sample and user guide for your reference

[index.js]
 

 

const onActionBegin = (args) => {

        if (args.requestType === 'toolbarItemRendering') {

            args.items.splice(3, 1);

            const customIconItem = {

                align: 'Right',

                prefixIcon: 'e-icon-add',

                text: '', 

                tooltipText: 'New Event', 

                id: 'custom-new-event-btn', 

                click: () => openCustomDialog() // Bind click handler

            };

            args.items.splice(3, 0, customIconItem);

        }

    };

    

    const openCustomDialog = () => {

        alert('Custom Dialog Opened!');

    };
 

    return (<div className='schedule-control-section'>

            <div className='col-lg-12 control-section'>

                <div className='control-wrapper schedule-wrapper'>

                    <ScheduleComponent actionBegin={onActionBegin}>      

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

};

export default AdaptiveGrouping;

Sample link: https://stackblitz.com/edit/react-1abzyp-dsqj9v?file=index.js

UG link: https://ej2.syncfusion.com/react/documentation/schedule/header-bar#customizing-header-bar

actionBegin event api: https://ej2.syncfusion.com/react/documentation/api/schedule/#actionbegin

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay