Prevent date navigation using swipe on mobile

[Amos]

Hi

I saw this on other technologies but not for vue.

When viewing a certain month (schedule) on a mobile, the user can swipe and navigate to the next/prev month.

How can this be prevented?

Thanks

[Ravikumar Venkatesan]

Hi Amos, 

  

Greetings from Syncfusion support. 

  

We have validated your requirement at our end. We have achieved your requirement with the help of the actionBegin event like the below code. We have prepared a sample for your reference and it can be available below. 

  

<template> 

  <div> 

    <div class="col-md-12 control-section"> 

      <div class="content-wrapper"> 

        <ejs-schedule id="Schedule" ref="scheduleObj" height="650px" :eventSettings="eventSettings" :actionBegin="onActionBegin"> 

          <e-views> 

            <e-view option="Month"></e-view> 

          </e-views> 

        </ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

  

<script> 

export default Vue.extend({ 

  data: function () { 

    return { 

      eventSettings: { dataSource: extend([], data, null, true) }, 

    }; 

  }, 

  provide: { 

    schedule: [Month, Resize, DragAndDrop], 

  }, 

  methods: { 

    onActionBegin(args) { 

      if (args.requestType === "dateNavigate") { 

        let scheduleObj = document.querySelector(".e-schedule") 

          .ej2_instances[0]; 

        let isDevice = scheduleObj.element.classList.contains("e-device"); 

        if (!isDevice) return; 

  

        let isNotSwip = 

          args.event.currentTarget.querySelector(".e-prev") || 

          args.event.currentTarget.querySelector(".e-next"); 

        args.cancel = !isNotSwip; 

      } 

    }, 

  }, 

}); 

</script> 

  

Sample: https://codesandbox.io/s/ej2-vue-schedule-setting-multiple-work-hours-for-individual-day-of-the-each-resources-forked-r8kyq?file=/src/App.vue 

  

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

  

API(actionBegin event): https://ej2.syncfusion.com/vue/documentation/api/schedule/#actionbegin 

  

Regards, 

Ravikumar Venkatesan 

[Amos]

Basically I want to prevent month navigation completely (desktop and mobile), I understand I can simply do the following?

onActionBegin(args) {
    args.cancel = args.requestType === "dateNavigate";
},

Thanks

[Ravikumar Venkatesan]

Hi Amos, 

Thanks for the update. 

We have validated your requirement “I want to prevent month navigation completely (desktop and mobile)” at our end. We have achieved your requirement with the below code. 

[App.vue] 

    onActionBegin(args) { 

      let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0]; 

      args.cancel = scheduleObj.currentView === "Month" && args.requestType === "dateNavigate"; 

    } 

Note: If you using the month view alone remove the highlighted code. 

Sample: https://codesandbox.io/s/ej2-vue-schedule-setting-multiple-work-hours-for-individual-day-of-the-each-resources-forked-xro40?file=/src/App.vue 

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

Regards, 

Ravikumar Venkatesan 

[Amos]

Thanks, it worked.

[Vengatesh Maniraj]

Hi Amos, 

You are most welcome. 

We are happy that our solution has worked.  

Please get in touch with us if you need any further assistance. 

Regards,
Vengatesh