[Bug][Calendar] Dynamically Changing BottomView Causes Incorrect Styling

[incutonez]

Describe the bug
When I attempt to change the bottomView property in the Calendar component, the styling looks wrong.

To Reproduce
Steps to reproduce the behavior:

See this Fiddle. After 3 seconds, the bottomView property will change, and you'll see it renders as

Instead of

Repro Code:

<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      <Calendar :default-active-view="bottomView" :bottom-view="bottomView" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Calendar } from "@progress/kendo-vue-dateinputs";

const bottomView = ref("month");

setTimeout(() => {
  bottomView.value = "year";
}, 3000);
</script>

Expected behavior
It should render properly.

Screenshots
See repro area for screenshots.

Browser

• OS: Windows 11
• Browser Any
• Version 7.0.2

[incutonez]

After looking at the source code a little more, I noticed a handleViewChange method and decided to try it out... after some trial and error (the view property passed in the object appears to be some sort of enum number value instead of the string), I got it to work. I have updated the Fiddle from above, and all you have to do is change the applyPatch value to true to see it working. Here's the code:

<template>
  <div id="vueapp" class="vue-app">
    <div class="example-config">
      <Calendar
        ref="calendarComponent"
        :default-active-view="bottomView"
        :bottom-view="bottomView"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, useTemplateRef } from "vue";
import { Calendar } from "@progress/kendo-vue-dateinputs";

const calendarComponent = useTemplateRef("calendarComponent");
const bottomView = ref("month");
const applyPatch = false;

setTimeout(() => {
  bottomView.value = "year";
  if (applyPatch) {
    calendarComponent.value.handleViewChange({
      // 0 = month, 1 = year, 2 = decade, 3 = century
      view: 1,
    });
  }
}, 3000);
</script>

Obviously this is less than ideal because I'm using what appears to be a private method, and props should be reactive, but at least there's a workaround.

[Sasho32]

Hello,

Thank you for reporting this issue and for the detailed investigation and workaround you’ve shared. We appreciate you bringing this to our attention, and we will take it into account when planning our upcoming improvements and fixes.