allowVirtualScroll not working properly with selectedDate on Android/ mobile Devices.

[Tonathiu]

Good morning, 

We have been seen a bug for Android/Mobile Devices when using allowVirtualScroll set to true. 

You can test the bug yourself on your documentation (https://ej2.syncfusion.com/vue/documentation/schedule/views/#agenda-view)

When you test the sample on agenda View (On Android device), the displayed date is the most earliest date, not the selectedDate which is --> selectedDate: new Date(2018, 1, 15). However, when you select the timepicker..the selectedDAte is correct. See pictures below. In the Destkop browsers everything is properly working.

Is there a way we can use some Vue Schedule component action functions to fix this isssue? If so, could you send us a code sample? while this bug is beng fixed.

Thanks for your support

Desktop:     (works fine)                                                                                                         

Mobile DEvices. (bugs) 

 

[Ravikumar Venkatesan]

Hi Tonathiu, 

Greetings from Syncfusion support. 

We have validated your reported query “allowVirtualScroll not working properly with selectedDate on Android/ mobile Devices” at our end. We are able to reproduce the issue that you have reported. We had already logged the defect report at our end and the fix will be included in our Volume 2 main release which is scheduled on June 19, 2020. You can track this defect in the below feedback link. We appreciate your patience. 

Feedback: https://www.syncfusion.com/feedback/15044/when-enable-virtual-scrolling-on-mobile-mode-agenda-view-content-rendering-loop-is 

Meantime, we suggest you set false to hideEmptyAgendaDays property like the below code to overcome this issue. This can disable the events that present on before the selected date rendering on the Schedule and the events are only rendered from the selected date on initial rendering. 

[App.vue] 

<template> 

  <div> 

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

      <div class="content-wrapper"> 

        <ejs-schedule id="Schedule" width="100%" :height="scheduleHeight" :eventSettings="eventSettings" :agendaDaysCount="14" :hideEmptyAgendaDays="emptyAgendaDays" :firstDayOfWeek="1" :currentView="currentView" :selectedDate="selectedDate"> 

          <e-views> 

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

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

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

            <e-view option="Agenda" allowVirtualScrolling="true"></e-view> 

          </e-views> 

        </ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { scheduleData } from "./datasource"; 

import { extend } from "@syncfusion/ej2-base"; 

import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 

 

Vue.use(SchedulePlugin); 

 

export default Vue.extend({ 

  data: function() { 

    return { 

      currentView: "Agenda", 

      scheduleHeight: window.innerHeight, 

      emptyAgendaDays: false, 

      selectedDate: new Date(), 

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

    }; 

  }, 

  provide: { 

    schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop] 

  }, 

  methods: {} 

}); 

</script> 

Sample: https://codesandbox.io/s/vue-schedule-ageda-view-zmggg?file=/src/App.vue 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan 

[Tonathiu]

Thanks for the temporary solution. 

We tried this on IOS Iphone and the scrolling does not properly work in Agenda View (Only stays on the month is current,  sometimes in renders slowly to show the other months, but overall not working at all) See sample you provided to test on IOS. We want to suggest to you guys (if possible) to see/test globally the functionality of  the "Schedule Component" in mobile devices.Seems that we run more often to mobile(IOS and Android) bugs than desktop. 

 https://codesandbox.io/s/vue-schedule-ageda-view-zmggg?file=/src/App.vue 

Thanks Again for your support. 

 

[Ravikumar Venkatesan]

Hi Tonathiu, 

Thanks for the update. 

We have validated your reported query “Virtual scrolling on Agenda view is not working properly in IOS” at our end. We are able to reproduce the issue at our end. We have considered this as a defect and logged the below defect report at our end. The fix for the issue will be included in our Volume 2 main release which is scheduled to be rolled out by the end of June 2020. You can track this defect status in the below feedback link. 

Feedback: https://www.syncfusion.com/feedback/15233/virtual-scrolling-on-ios-is-not-working-properly 

Please get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan