search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.38k stars 137 forks source link

multi-calendars with high count is slow on click #913

Closed lupus78 closed 2 weeks ago

lupus78 commented 3 weeks ago

Describe the bug I'm showing a vertical list of multiple calendars on mobile, so the user can swipe up and down to select his date range. The click event takes a long time to update the UI (highligh the first clicked day) and the same happens on the range end click.

To Reproduce

    <VueDatePicker
      v-model="datepicker"
      range
      :multi-calendars="{ solo: false, static: true, count: 48 }"
      :partial-range="false"
      min-range="1"
      format="MMM dd, yyyy"
      inline
      :auto-apply="true"
      :vertical="true"
      six-weeks="center"
    />

The higher the count the longer the UI update takes, with 48 calendars it's around 800ms on my machine.

stackblitz link: https://stackblitz.com/edit/vuepic-vue-datepicker-797udv?file=src%2Fcomponents%2FPlayground.vue

Expected behavior Faster UI response

Screenshots Chrome performance report: image

Desktop & mobile (please complete the following information):

lupus78 commented 3 weeks ago

just updated to 8.8.0 and the issue still exists.

Did some digging, and as I suspected, it's because of the recalculation of the classes for each day, getDayClassData() function is ran for each day, and it's happening twice, once for mouseenter and after for the click event.

Jasenkoo commented 2 weeks ago

It is not designed to actually handle that many calendars tbh. To support various modes, validations, and so on, that is why the classes are added dynamically. Maybe I'll address this in the future or if someone wants to contribute, otherwise, will not focus on this now.

lupus78 commented 2 weeks ago

I'm sad to hear this. Showing many calendars below each other is becoming a norm for mobile devices and a way more intuitive/pleasant experience for the user.