Our pure JavaScript Scheduler component


Post by jnarowski »

We are using Vite 4 and Storybook and I have not been able to get your Vue components to load. Wondering if anyone has any further troubleshooting steps.

I’ve reviewed both of these files and adjusted my Vite config (see screenshot) accordingly.
viewtopic.php?f=44&p=109667
https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/gettingstarted/es6bundle#troubleshooting%20for%20more%20information

But still getting this error:
https://jmp.sh/lV1n5fRo

Here’s a snippet of the packages I’ve loaded into the project:
https://jmp.sh/XQBuItrN

Example repo to reproduce
https://drive.google.com/file/d/1hkjhf06rGAn9ccgsgnLBzYFPea62SYts/view?usp=sharing


Post by jnarowski »

This is the same for the Calendar as well.


Post by marcio »

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

Attachments
Screenshot 2023-02-07 at 18.24.40.png
Screenshot 2023-02-07 at 18.24.40.png (104.43 KiB) Viewed 129 times

Best regards,
Márcio


Post Reply