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.
Support Forum
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')"
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!
All the best,
Alex
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
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.
All the best,
Alex
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?
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