Open Quickview on scheduler empty cell click with mobile device

Hi,

I would like to know how to open the Quickview  on an empty cell click in the scheduler  on mobile device the same way as desktop.
And is it posible to disable the responsive mode on scheduler view ? In EJ1 there is a property called isResponsive but I found nothing for EJ2.

Thank you

3 Replies 1 reply marked as answer

NR Nevitha Ravi Syncfusion Team March 9, 2021 02:18 PM UTC

Hi Pascal, 

Greetings from Syncfusion Support. 

We have validated your reported query ‘wants to load the scheduler in non-responsive mode in mobile mode’ and let you know that when implementing EJ2 we have considered to render the scheduler in mobile mode responsively. If we render in non-responsive mode the content might not visible properly in all the mobiles so the layout has been rendered for mobile mode separately by having ‘e-device’ class. So please share your requirement for rendering the scheduler in mobile mode without responsive based on that we will provide you the solution. 

Regards, 
Nevitha 



PT Pascal Thomé March 9, 2021 02:42 PM UTC

Hi Nevitha,

Thanks for your response, I understand responsive mode should not be disabled.

I would like to open the Quickview window on mobile single tap instead of the inline temporary event as below :


The reason why is to get a more consistent user experience between desktop and mobile.
The responsive mode require an additional tap to open the full editor and most of the time the Quickview is sufficient.

Thank you
Pascal


RV Ravikumar Venkatesan Syncfusion Team March 10, 2021 01:03 PM UTC

Hi Pascal, 

Greetings from Syncfusion support. 

We have validated your requirement at our end and we are unable to enable a quick info window in mobile mode due to styling problems. But, we can use the below ways to make the appointment add action easier with the Schedule in mobile mode. 

Using allowInline property of the Schedule 
The allowInline property of the Schedule allows users to add an event with Subject easily to Schedule by tapping the cell and for the same, we have prepared a sample which can be downloaded from the below link. 


[Index.cshtml] 
<ejs-schedule id="schedule" created="onCreated"></ejs-schedule> 
 
<script type="text/javascript"> 
    function onCreated() { 
        var schedule = document.querySelector(".e-schedule"); 
        if (schedule) { 
            var scheduleObj = schedule.ej2_instances[0]; 
            scheduleObj.allowInline = scheduleObj.isAdaptive; 
        } 
    } 
</script> 

Using openEditor method 
We can manually open the editor window of the Schedule with help of openEditor method on single cell click itself. We have achieved it in the cellClick event of Schedule and for the same, we have prepared a sample which can be downloaded from the below link. 


[Index.cshtml] 
<ejs-schedule id="schedule" cellClick="onCellClick"></ejs-schedule> 
 
<script type="text/javascript"> 
    function onCellClick(args) { 
        var schedule = document.querySelector(".e-schedule"); 
        if (schedule) { 
            var scheduleObj = schedule.ej2_instances[0]; 
            // Preventing cell click action by setting up args.cancel as true 
            args.cancel = scheduleObj.isAdaptive; 
            if (scheduleObj.isAdaptive) { 
                // Open editor window mannually 
                scheduleObj.openEditor(args, "Add"); 
            } 
        } 
    } 
</script> 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
Loader.
Up arrow icon