[VUE 3] Manage calendar data from API

[alex.l]

Please share your app, I don't understand why did you initialize Grid component with eventStore, it doesn't have this property. Please review our examples for Vue, you have it in examples/frameworks/vue folder.

[luiscloud]

I saw that in some doc guide.

But if i dont init it is undefined too. I tried both workflows.

My code without grid init:

  setup() {
    const calendar = ref(null)

const eventExample = {
  id: 1,
  startDate: '2021-12-28T14:00:00',
  endDate: '2021-12-28T16:00:00',
  name: 'Hackathon 2020',
  allDay: true,
  eventColor: 'green',
}

const calendarConfig = reactive(calendarConfigBase)

onMounted(() => {
  calendar.value.eventStore.data = [{ eventExample }]
  console.log({ calendarEventStore: calendar?.value?.eventStore })
})

return { calendar, calendarConfig }
  },

Where eventStore is undefined and i have next error:
"Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'data')"

[alex.l]

Sorry, I need a runnable test case, I can't say a lot by these lines.
Try calendar.value.instance.eventStore or calendar.instance.eventStore, if it doesn't work, please attach your full runnable application and we will be able to help you. You also could try to edit our examples and check if it works there.

Thanks!

[luiscloud]

Ok in example i can check is

calendar.value.instance.value.eventStore.data

My code now:

    onMounted(() => {
      calendar.value.instance.value.eventStore.data = [{ eventExample }]
      calendar.value.instance.value.refresh()

  console.log({ calendarEventStore: calendar.value.instance.value.eventStore })
})

In console log, event appear on "_data" prop inside eventStore, but event doesn't show on calendar view.... it is being very difficult to work with this library

[alex.l]

I just tried this in our vue-3 example (examples/frameworks/vue-3/javascript/basic)

        onMounted(() => {
            calendar.value.instance.value.eventStore.data = [
            {
                "id"         : 1,
                "startDate"  : "2020-10-11T14:00:00",
                "endDate"    : "2020-10-18T12:00:00",
                "name"       : "Hackathon 2020",
                "allDay"     : true,
                "resourceId" : "bryntum",
                "eventColor" : "green"
            },
            {
                "id"         : 2,
                "startDate"  : "2020-10-11T14:00:00",
                "endDate"    : "2020-10-11T18:00:00",
                "name"       : "Check-In in Hotel",
                "resourceId" : "hotel"
            }
            ]

    });

And removed crudManager config from AppConfig.js and I see correct data with no need to refresh.
It will go faster if you allow us to see your application. Make sure you don't have crudManager or any other configuration in your reactive calendar config that may overwrite your onMounted changes because of race condition.

[luiscloud]

Complete component:

<template>
  <div class="calendar-container">
    <bryntum-calendar ref="calendarRef" v-bind="calendarConfig" />
  </div>
</template>

<script>
import { BryntumCalendar } from '@bryntum/calendar-vue-3'
import { reactive, ref, onMounted } from 'vue'

export default {
  name: 'calendar',
  props: {
    events: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    BryntumCalendar,
  },

  setup() {
    const calendarRef = ref(null)

const eventExample = {
  id: 1,
  startDate: '2021-12-28T14:00:00',
  endDate: '2021-12-28T16:00:00',
  name: 'Hackathon 2020',
  allDay: true,
  eventColor: 'green',
}

const calendarConfig = reactive({})
let calendar = null
onMounted(() => {
  calendar = calendarRef.value.instance.value

  calendar.eventStore.data = [{ eventExample }]
  // calendar.refresh()

  const startDate = calendar.activeView.startDate
  const endDate = calendar.activeView.endDate

  console.log({ startDate, endDate })

  console.log({ calendarEventStore: calendar.eventStore, activeView: calendar.activeView })
})

return { calendarRef, calendarConfig }
  },
}
</script>

I can check startDate and endDate but calendar doesnt show any event

EDIT: My bad, i set bad the list, the correct form is:

calendar.eventStore.data = [eventExample]

There is a listener to get activeView.startDate and activeView.endDate when change to update events to show?

Maybe with dateRangeChange? how can i subscribe to this event?

[Animal]

Don't configure your Calendar with events. Although that will be converted into an eventStore, it is not configurable - it's just the initial event payload.

Try

export default {
  name: 'calendar',
  props: {
    eventStore: {
      listeners : {
        loadDateRange(evt) {
          debugger; // Here's the info
        }
      }
    }
  },
...

All these options are fully described in the API docs. How to configure your Calendar: https://127.0.0.1/bryntum/bryntum-suite/Calendar/docs/#Calendar/view/Calendar#config-eventStore

That is the option which provides the event store.

Want to configure that?

Follow the link right from there to here: https://127.0.0.1/bryntum/bryntum-suite/Calendar/docs/#Scheduler/data/EventStore