Scheduler view bug reproduction

<script setup lang="ts">
// @ts-nocheck
import '@bryntum/calendar/calendar.stockholm.css'
import { ref, toRefs, computed, onMounted } from 'vue'
import { BryntumCalendar } from '@bryntum/calendar-vue-3'
import { Calendar, DateHelper } from '@bryntum/calendar'
import { PresetManager, StringHelper } from '@bryntum/schedulerpro'

interface iSpectoraCalendarProps {
  config: any
  events: any[]
  resources: any[]
  settings: any
  me: any
}

const useCalendarConfig = () => {
  const baseTimelineConfig = {
    type: 'scheduler',
    displayName: 'Timeline',
    columns: [
      {
        type: 'resourceInfo',
        field: 'name',
        text: 'Inspectors',
        width: 175,
      },
    ],
  }

  return {
    sidebar: props.config.sidebar,
    mode: 'week',
    features: {
      eventTooltip: {
        // Tooltip configs can be used here
        align: 'l-r', // Align left to right,
        // Custom content
        renderer: (data) => {
          return 'I am a tooltip!'
        },
      },
    },
    modes: {
      day: {
        ...baseTimelineConfig,
        stepUnit: 'day',
        displayName: 'Day',
      },
      week: {
        ...baseTimelineConfig,
        stepUnit: 'week',
        displayName: 'Week',
        viewPreset: {
          base: 'hourAndDay',
          tickWidth: 45,
          headers: [
            {
              unit: 'day',
              dateFormat: 'ddd MM/DD',
            },
            {
              unit: 'hour',
              dateFormat: 'hA',
            },
          ],
        },
      },
      month: {
        showResourceAvatars: 'last',
        autoRowHeight: true,
      },
      year: false,
    },
  }
}

const props = withDefaults(defineProps<iSpectoraCalendarProps>(), {
  config: () => ({}),
  settings: () => ({}),
  me: () => ({}),
  resources: () => [
    {
      id: 25,
      name: '[QA] Advanced Multi',
      imageUrl:
        'https://s3.amazonaws.com/spectora-development/users/images/000/000/032/original/younginspector.jpg?1677019602',
    },
  ],
  events: () => [
    {
      id: 1,
      name: '3333 Quebec St, Denver 80207',
      resourceId: ['25'],
      startDate: '2023-03-24T08:00:00.000-06:00',
      endDate: '2023-03-24T10:30:00.000-06:00',
    },
    {
      id: 2,
      name: '3535 Quebec St, Denver 80207',
      resourceId: ['25'],
      startDate: '2023-03-23T08:00:00.000-06:00',
      endDate: '2023-03-23T10:30:00.000-06:00',
    },
  ],
})

const calendarRef = ref(null)
const calendarConfig = ref(useCalendarConfig())

const handleEventClick = (options) => {
  console.log('event clicked:', options)
}

const handleBeforeEventEdit = (options) => {
  console.log('handleBeforeEventEdit', options)

  return true
}

const handleBeforeDragMoveEnd = (options) => {
  console.log('handleBeforeDragMoveEnd', options)

  return true
}

const handleDragMoveEnd = (options) => {
  console.log('handleDragMoveEnd', options)

  return true
}
const handleBeforeDragResizeEnd = (options) => {
  console.log('handleBeforeDragResizeEnd', options)

  return true
}
const handleBeforeDragCreateEnd = (options) => {
  console.log('handleBeforeDragCreateEnd', options)

  return true
}

const handleBeforeEventDropFinalize = ({ context }) => {
  console.log('handleBeforeEventDropFinalize', context)
  context.valid = true
  return context
}

const handleBeforeEventResize = ({ context }) => {
  console.log('beforeEventResize', context)
  context.valid = true
  return context
}

const handleBeforeEventSegmentResize = ({ context }) => {
  console.log('beforeEventSegmentResize', context)

  return true
}

const handleCellClick = (options) => {
  console.log('cellClick', options)
}
</script>

<template>
  <bryntum-calendar
    ref="calendarRef"
    :events="events"
    :resources="resources"
    v-bind="calendarConfig"
    @event-click="handleEventClick"
    @before-event-event-resize="handleBeforeEventResize"
    @before-event-drop-finalize="handleBeforeEventDropFinalize"
    @before-drag-move-end="handleBeforeDragMoveEnd"
    @drag-move-end="handleDragMoveEnd"
  />
</template>