Task Row Height Does Not Adjust Correctly When Navigating Between Weeks in Week View

[carolcal]

Version

@toast-ui/calendar: ^2.1.3
@toast-ui/vue-calendar: ^2.1.3

Test Environment

Browser: Chrome (oficial-latest)
Operating System: Windows 11

Current Behavior

In week view of Toast UI Calendar, when more than 3 tasks are scheduled on a given day, a hidden task button (e.g., "+2") is displayed. When this button is clicked, the row collapses as expected. However, when navigating between weeks using the move method, the collapsed task row does not adjust its height correctly. The row remains collapsed, but the height stays the same, leading to layout issues where extra empty space remains, or events may get hidden even when the row is collapsed.

Steps to reproduce:

1. Create a Vue 2 application and install toast-ui calendar.
2. Load the provided code example with predefined events.
3. Use the "Prev" button and notice that the task row remains collapsed, but the height does not adjust, leaving extra empty space in the layout.
4. Click the "Today" button to return to the current week.
5. Use the "Next" button and notice that "Event 9" is not displayed because the height does not adjust correctly.

Sample Code:

<template>
  <div>
    <h1>🍞📅 TOAST UI Calendar + Vue</h1>
    <div class="buttons">
      <button type="button" @click="onClickTodayButton">Today</button>
      <button type="button" @click="onClickMoveButton(-1)">Prev</button>
      <button type="button" @click="onClickMoveButton(1)">Next</button>
    </div>
    <span class="date-range">{{ dateRangeText }}</span>
    <ToastUICalendar
      ref="calendar"
      style="height: 70vh"
      :view="'week'"
      :week="{
        eventView: ['time'],
        taskView: ['task'],
      }"
      :calendars="calendars"
      :events="events"
    />
  </div>
</template>
  
  <script>
import ToastUICalendar from "@toast-ui/vue-calendar";
import "@toast-ui/calendar/dist/toastui-calendar.min.css";
import { TZDate } from "@toast-ui/calendar";

export default {
  components: { ToastUICalendar },
  data() {
    const today = new TZDate();
    const nextWeek = new TZDate(today);
    nextWeek.setDate(today.getDate() + 7);
    return {
      calendars: [
        { id: "0", name: "Private", backgroundColor: "#9e5fff" },
        { id: "1", name: "Company", backgroundColor: "#00a9ff" },
      ],
      dateRangeText: "",
      events: [
        {
          id: "1",
          calendarId: "0",
          title: "Event 1",
          category: "task",
          start: today.toString(),
          end: today.toString(),
        },
        {
          id: "2",
          calendarId: "1",
          title: "Event 2",
          category: "task",
          start: today.toString(),
          end: today.toString(),
        },
        {
          id: "3",
          calendarId: "0",
          title: "Event 3",
          category: "task",
          start: today.toString(),
          end: today.toString(),
        },
        {
          id: "4",
          calendarId: "1",
          title: "Event 4",
          category: "task",
          start: today.toString(),
          end: today.toString(),
        },
        {
          id: "5",
          calendarId: "0",
          title: "Event 5",
          category: "task",
          start: nextWeek.toString(),
          end: nextWeek.toString(),
        },
        {
          id: "6",
          calendarId: "0",
          title: "Event 6",
          category: "task",
          start: nextWeek.toString(),
          end: nextWeek.toString(),
        },
        {
          id: "7",
          calendarId: "1",
          title: "Event 7",
          category: "task",
          start: nextWeek.toString(),
          end: nextWeek.toString(),
        },
        {
          id: "8",
          calendarId: "0",
          title: "Event 8",
          category: "task",
          start: nextWeek.toString(),
          end: nextWeek.toString(),
        },
        {
          id: "9",
          calendarId: "1",
          title: "Event 9",
          category: "task",
          start: nextWeek.toString(),
          end: nextWeek.toString(),
        },
      ],
    };
  },
  computed: {
    calendarInstance() {
      return this.$refs.calendar.getInstance();
    },
  },
  mounted() {
    this.setDateRangeText();
  },
  methods: {
    onClickTodayButton() {
      this.calendarInstance.today();
      this.setDateRangeText();
    },
    onClickMoveButton(offset) {
      this.calendarInstance.move(offset);
      this.$nextTick(() => {
        this.calendarInstance.render(); // Attempt to fix the layout after navigating
      });
      this.setDateRangeText();
    },
    setDateRangeText() {
      const start = this.calendarInstance.getDateRangeStart();
      const end = this.calendarInstance.getDateRangeEnd();
      this.dateRangeText = `${start.getFullYear()}.${
        start.getMonth() + 1
      }.${start.getDate()} - ${end.getFullYear()}.${
        end.getMonth() + 1
      }.${end.getDate()}`;
    },
  },
};
</script>

Expected Behavior

When navigating between weeks, the task row height should adjust properly based on its collapsed or expanded state. If the row is collapsed, the height should shrink accordingly, and if the row is expanded, it should display all tasks correctly without leaving unnecessary space