Disable scheduler's mobile version

[Rodrigo Bergel]

Hello team, I hope this message finds you well.

We have found a number of issues with the mobile version of the scheduler, and we'd like to disable it altogether. The desktop version works for us in all resolutions and device types.

We've tried setting isResponsive/isAdaptive properties, which didn't result in any changes. How can we disable this behavior of the scheduler?

[Praveenkumar Narasimhanaidu]

Hi Rodrigo, 

Greetings from Syncfusion support..! 

We have validated your requirement “Disable scheduler's mobile version” at our end and you can achieve it by providing fixed desktop width for the viewport. For the same, we have prepared a sample which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/ej2-angular-scheduler-disable-responsiveness?file=index.html 

Index.html 

<meta name="viewport" content="width=1440, initial-scale=1" /> 

If you are using resource grouping, you can customize responsive behavior with the help of enableAdaptiveUI property. For more information, please refer to the following links. 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/adaptive-grouping 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/resources/#compact-view-in-mobile 

Kindly try the above solution and let us if this meets your requirement. 

Regards, 

Praveenkumar 

[Rodrigo Bergel]

Hi  Praveenkumar!

Thanks for the quick reply, unfortunately this solution is not applicable to my end because it messes up with the layout for the other items of the page.

The reason that I'm trying to disable the responsive behavior is because of a layout bug when picking a time on the popup, if we fix this issue we can still display the mobile version, I'm attaching a screenshot straight from the examples of the library. https://ej2.syncfusion.com/angular/demos/?_ga=2.2762036.566184882.1638361091-122944237.1628687788#/material/schedule/overview

The problem is that the "e-datetimepicker" div opens on the same position of the screen for start and end time, and it is not aligned with the respective input.

Thank you in advance.

[Praveenkumar Narasimhanaidu]

Hi Rodrigo, 

  

Thanks for your update. 

  

We have validated your requirement and customized the position of dateTimePicker popups on adaptive mode with the help of the below code snippets. We have also prepared a sample for your reference which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/ej2-angular-scheduler-disable-responsiveness-pcdtk2?file=app.component.ts 

  

App.component.ts 

  

  onPopupOpen(args) { 

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

      if(this.scheduleObj.isAdaptive){ 

      var startPicker = ( 

        document.querySelector('.e-start.e-datetimepicker') as any 

      ).ej2_instances[0]; 

      startPicker.open = () => { 

        if(document.querySelector('.e-datetimepicker.e-popup')){ 

        (document.querySelector('.e-datetimepicker.e-popup').ej2_instances[0] as any).relateTo = '.e-start'; 

        (document.querySelector('.e-datetimepicker.e-popup').ej2_instances[0] as any).position.Y = 'Bottom'; 

        } 

      }; 

      var endPicker = ( 

        document.querySelector('.e-end.e-datetimepicker') as any 

      ).ej2_instances[0]; 

      endPicker.open = () => { 

        if(document.querySelector('.e-datetimepicker.e-popup')){ 

        (document.querySelector('.e-datetimepicker.e-popup').ej2_instances[0] as any).relateTo = '.e-end'; 

        (document.querySelector('.e-datetimepicker.e-popup').ej2_instances[0] as any).position.Y = 'Bottom'; 

        } 

      }; 

  

    } 

  

Output: 

  

 

  

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

  

Regards, 

Praveenkumar 

[Rodrigo Bergel]

Hi Praveenkumar

Thanks for the reply, the snippet that you provided worked, thank you!

[Vengatesh Maniraj]

Hi Rodrigo,

You are most welcome😊

Regards,

Vengatesh