Schedule quick info template not working on mobile

[Joel Watkins]

Hello,

Hopefully this is the right place- we have an issue with the schedule where the quick info templates work absolutely fine on desktop, but on mobile, tapping appointments does absolutely nothing. In the dev tools, if I go into responsive mode and switch to mobile view, it does work, but testing on an actual mobile device gives no result - we can tap areas in the diary and the appointments, and they are all highlighted, but the quick info template doesn't appear.

I'll add in the relevant code below - please let me know if you have any ideas on how to get this working on mobile.

Many thanks

@Html.EJS().Schedule("diary").FirstDayOfWeek(1).QuickInfoTemplates(qit => qit.Header("#QuickHeaderTemplate").Content("#QuickContentTemplate")).Views(view =>

{
    view.Option(View.Day).Add();
    view.Option(View.Week).Add();
    view.Option(View.WorkWeek).Add();
    view.Option(View.Month).Add();
    }).AllowResizing(false).AllowDragAndDrop(false).ActionBegin("DiaryBegin").ActionComplete("DiaryComplete").AllowMultiRowSelection(false).WorkHours(new ScheduleWorkHours { Start = Model.diaryDayStart, End = Model.diaryDayEnd }).EventSettings(new ScheduleEventSettings { Template = "#DiaryTemplate" }).Created("DiaryCreated").PopupOpen("scheduleDialogOpen").StartHour(Model.diaryDayStart).EndHour(Model.diaryDayEnd).EditorTemplate("#EventEditorTemplate").EventDoubleClick("onEventDoubleClick").Render()


<script id="QuickHeaderTemplate" type="text/x-template">
    <div class="e-header-icon-wrapper">
        <button class="e-close e-control e-btn e-lib e-flat e-round e-small e-icon-btn" title="Close">
        </button>
    </div>
    <div class="e-subject-wrap">
        <div class="e-subject e-text-ellipsis" title="${CardTitle}" style="font-size: 18px;padding-top: 5px;">${CardTitle}</div>
    </div>
</script>


<script id="QuickContentTemplate" type="text/x-template">
    <div class="row no-gutters">
        ${if(!BusyPeriod&&ProfileImagePath)}
        <div class="col-auto pr-4">
            <div class="h-100">
                <img src="${ProfileImagePath}" alt="Worker Picture" height=150 />
            </div>
        </div>
        ${/if}
        <div class="col">
            ${if(Flexible)}
            <div class="e-date-time pt-0">
                ${if(Frequency != null && FrequencyName != null)}
                <div class="e-frequency-icon e-icons"></div>
                <div class="e-date-time-wrapper e-text-ellipsis">
                    <div class="e-date-time-details e-text-ellipsis diary-details">
                        ${Frequency} hour(s) ${FrequencyName}
                    </div>
                </div>
                ${/if}
            </div>
            ${/if}
            <div class="e-date-time pt-0">
                <div class="e-date-time-icon e-icons" style="padding-top: 7px;"></div>
                <div class="e-date-time-wrapper e-text-ellipsis">
                    ${if(Flexible)}
                    <div class="e-date-time-details e-text-ellipsis diary-details">${getDateString(data.StartTime)} - ${getDateString(data.EndTime)}</div>
                    ${else}
                    <div class="e-date-time-details e-text-ellipsis diary-details">${getDatetimeString(data.StartTime)} - ${getDatetimeString(data.EndTime)}</div>
                    ${/if}
                </div>
            </div>
            ${if(BusyPeriod && BusyReason!=null && BusyReason.trim().length)}
            <div class="e-location pt-0">
                <div class="e-detail-icon e-icons"></div>
                <div class="e-location-details e-text-ellipsis diary-details">${BusyReason}</div>
            </div>
            ${/if}
            ${if(ModuleName!=null && ModuleName.trim().length)}
            <div class="e-location pt-0">
                <div class="e-module-icon e-icons"></div>
                <div class="e-location-details e-text-ellipsis diary-details">${ModuleName}</div>
            </div>
            ${/if}
            ${if(Location!=null && Location.trim().length)}
            <div class="e-location pt-0">
                ${if(BusyPeriod)}
                <div class="e-detail-icon e-icons"></div>
                ${else}
                <div class="e-location-icon e-icons" style="padding-top: 7px;"></div>
                ${/if}
                <div class="e-location-details e-text-ellipsis diary-details">${Location}</div>
            </div>
            ${/if}
            ${if(ProfileImagePath)}
            ${/if}
        </div>
    </div>
</script>

[Vijay Ravi]

Hi Joel Watkins,
 

Greetings from Syncfusion Support,
 

We have reviewed and validated your reported query. To clarify the functionality of the scheduler: in mobile mode, clicking on a cell does not display of a quick info popup, which is the default behavior of the scheduler in mobile mode.
 

When long-pressing an appointment in mobile mode, the "EditEventInfo" popup appears at the top. Clicking an appointment opens the "ViewEvent" popup, and double-clicking an appointment opens the editor window.
 

If you wish to display a popup upon clicking a cell, you can bind the scheduler's CellClick event and implement a custom dialog. For your reference, please consult the API documentation and the sample provided below.

Scheduler Interaction UG: https://ej2.syncfusion.com/aspnetmvc/documentation/schedule/scheduler-interactions

CellClick Event API: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellClick

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

Regards,

Vijay