Hey jnarowski,
We've been investigating this for the day, and this looks like something between Storybook and Bryntum's Scheduler for Vue.
We found a workaround, for now, that makes the Scheduler render inside the story correctly (check the attached image)
<script lang="ts">
// @ts-nocheck
import '@bryntum/calendar/calendar.classic.css'
import { ref, reactive, onMounted } from 'vue'
import { BryntumProjectModel, BryntumCalendar } from '@bryntum/calendar-vue-3'
import { Calendar } from '@bryntum/calendar'
export const useCalendarConfig = () => { }
export const useProjectConfig = () => { }
export default {
name: 'App',
components: {
BryntumProjectModel,
Calendar,
BryntumCalendar,
},
setup() {
const calendar = ref(null)
const project = ref(null)
const calendarConfig = ref(useCalendarConfig())
const projectConfig = ref(useProjectConfig())
const resources = ref(null)
const events = ref(null)
resources.value = [
{
id: 1,
name: 'Default Calendar',
eventColor: 'green',
},
]
events.value = [
{
id: 1,
name: 'Meeting',
startDate: '2022-01-01T10:00:00',
endDate: '2022-01-01T11:00:00',
resourceId: 1,
},
]
// onMounted(() => {
// calendar.value.instance.value.project = project.value.instance.value
// })
return {
project,
calendar,
projectConfig,
calendarConfig,
resources,
events,
}
},
}
</script>
<template>
<div>
<div> teste</div>
<bryntum-project-model ref="project" v-bind="projectConfig" :resources="resources" :events="events" />
<bryntum-calendar ref="calendar" v-bind="calendarConfig" />
</div>
</template>
But besides that, we have a ticket to fix that (as it's a workaround and not a solution), and we'll be investigating and fixing it. https://github.com/bryntum/support/issues/6127