Schedule Mobile Version

[Matias Puzanowski]

Hi Syncfusion team!

We've noticed that when scheduler detects that the device is mobile, 'new event' behaviour changes completely breaking our implementation (We use an alternative dialog to create new events, not the default one).

Any tips on how can we disabworkaround this?

Regards!

[Ravikumar Venkatesan]

Hi Matias,

Greetings from Syncfusion support.

We have validated your query “Schedule Mobile Version” at our end. You can hide the new event element by overriding the default Schedule styles and call your custom dialog from the cellClick event of the Schedule.

Sample: https://stackblitz.com/edit/ej2-js-schedule-prevent-new-event-on-mobile-mode?file=index.js

[index.html]

    <style>

        .e-schedule .e-new-event {

            display: none;

        }

    </style>

[index.js]

var scheduleObj = new ej.schedule.Schedule({

    cellClick: function (args) {

        alert('You can open your custom dialog from here');

    }

});

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

[Matias Puzanowski]

Hi!

It isn't possible to change scheduler behaviour with any other way?

With cellClick we can't achieve same behaviour as we've implemented with 'QuickInfo', 'Editor'.

I've attached a video so  you can see normal behaviour vs. responsive behaviour. 

https://drive.google.com/file/d/1Dn0uwZ6-BQuJxAPsXi3Wct-zn0knbLtg/view?usp=sharing

Thanks in advance.

[Ravikumar Venkatesan]

Hi Matias,

Thanks for the update.

Based on your shared details we suspect that you are using the Schedule default QuickInfo and Editor popup with the template. You can prevent the new event element on the mobile mode and use the QuickInfo and Editor by setting up the isAdaptive property of the Schedule to false and removing the “e-device” class from the Schedule in the actionBegin event of the Schedule as shown in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-js-schedule-prevent-mobile-mode-sample?file=index.js

[index.js]

    actionBegin: function (args) {

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

            if (scheduleObj && scheduleObj.isAdaptive) {

                scheduleObj.isAdaptive = false;

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

            }

        }

    },

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan