Quickinfo popup does not show for new events on mobile view

[Muhammad]

we are currently using the scheduler component and have a custom quickinfo popup that displays at all times in place of the editorTemplate (editor template is disbaled), this works fine on desktop and also on mobile when viewing an existing appointment.

However when trying to create a new appointment the quickInfo popup does not show up: 

This can be seen from the screenshot above where a cell is selected and it shows "+ new", we want the quickinfo popup to show up there.

Clicking the "New Event" from the kebab menu also does not show the quick popup

enableAdaptiveUI  is also set to false

[Ashokkumar Karuppasamy]

Hi Muhammad

Thanks for reaching out us!

You can achieve your requirement using the actionBegin and popupOpen events in the Schedule component. This will allow you to display the QuickInfo popup in mobile mode as needed.

In the Schedule mobile view, the default behavior shows the New Event button instead of the Quick Popup. To override this, we have prevented the default mobile behavior and enabled the Quick Info popup in mobile mode.

The attached code snippet and sample demonstrate the solution below. Please try the solution and let us know if you need any further assistance.

Sample: schedule-quickpopup-mobile-view-layout (forked) - StackBlitz

    const onActionBegin = (args) => {

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

            if (scheduleObj && scheduleObj.current && scheduleObj.current.isAdaptive) {

              scheduleObj.current.isAdaptive = false;

              scheduleObj.current.element.classList.remove('e-device');

              scheduleObj.current.element.classList.add('e-custom-schedule');

            }

          }

    }

    const onPopupOpen = (args) => {

        if (args.type === 'Editor') {

            args.cancel = true

          }

        if (args.type === 'QuickInfo' && scheduleObj.current.element.classList.contains('e-custom-schedule')) {

            args.element.style.minWidth =

              scheduleObj.current.element.getBoundingClientRect().width + 'px';

        }

        if (args.target && !args.target.classList.contains('e-appointment') && !isNullOrUndefined(titleObj) && !isNullOrUndefined(titleObj.current)) {

            titleObj.current.focusIn();

        }

    };

<ScheduleComponent id="schedule" enableAdaptiveUI={false}

 actionBegin={onActionBegin} cssClass='quick-info-template' ref={scheduleObj} height="650px" selectedDate={new Date(2021, 0, 9)} eventSettings={{ dataSource: scheduleData }} quickInfoTemplates={{ header: headerTemplate.bind(this), content: contentTemplate.bind(this), footer: footerTemplate.bind(this) }} popupOpen={onPopupOpen.bind(this)}>

Screenshot:



Regards,
Ashok

[Muhammad]

Hi Ashok

thanks for getting back to me, this still does not seem to work when viewing on a mobile device, my scheduler component is created as below, is there something that i am doing incorrectly?

Note that i am using v28.1.33

<ScheduleComponent

ref={scheduleObj}

// enableAdaptiveUI={true}

enableAdaptiveUI={false}

enablePersistence={true}

// showQuickInfo={true}

key={`calendar-${branch.value}`} // Add this line

workHours={{ start: "06:00", end: "19:00" }}

startHour="07:00" // Scheduler starts displaying from 7 AM

endHour="19:00" // Scheduler ends displaying at 7 PM

actionBegin={onActionBegin}

popupOpen={onPopupOpen.bind(this)}

eventSettings={{

dataSource: events?.map((event) => ({

Id: event.id,

Subject: event.subject,

StartTime: event.start_time,

EndTime: event.end_time,

IsReadonly: false,

Notes: event.notes,

})),

allowAdding: true,

allowEditing: true,

allowDeleting: true,

editFollowingEvents: true,

}}

quickInfoTemplates={{

...QuickInfoTemplates(

setSelectedPatient,

isEditingRef.current,

isEditing,

handleClick,

scheduleObj

),

header: (props) =>

QuickInfoTemplates(

setSelectedPatient,

isEditingRef.current,

isEditing,

scheduleObj

).header({

...props,

closeQuickInfo: () => scheduleObj.current.closeQuickInfoPopup(),

}),

footer: (props) =>

QuickInfoTemplates(

setSelectedPatient,

isEditingRef.current,

isEditing,

scheduleObj

).footer({

...props,

closeQuickInfo: () => scheduleObj.current.closeQuickInfoPopup(),

handleClick,

}),

}}

>

<Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize]} />

</ScheduleComponent>

[Ashokkumar Karuppasamy]

Hi Muhammad,

Thanks for the update. Based on the shared code snippet, we have included your code in our sample and checked the issue on our end. The version you mentioned now properly shows the quick popup in mobile view. For your reference, we have attached the sample and screenshots.

Additionally, ensure that the action begin code and the scheduler's popup open event are used correctly as per the shared code snippet. If you are still facing issues, please share the popup open and action begin code snippet or a replicated issue in our shared samples.

Sample: schedule-quickpopup-mobile-view-layout (forked) - StackBlitz

Screenshot:

Regards,
Ashok