My schedule only have one resource. I have a event belongs this resource. Then I change resource of events to a resource id doesn't exist. Then I change back to this resource id. It notifies error:
- Screen Shot 2021-11-30 at 15.15.31.png (704.33 KiB) Viewed 632 times
Below is my code in example vue project:
<!-- Application -->
<template>
<div id="container">
<bryntum-demo-header
title="Vue Simple demo"
link="../../../../../#example-frameworks-vue-javascript-simple"
/>
<div class="demo-toolbar align-right">
<button @click="changeResourcesToR10">Change resources to R10</button>
<button @click="changeResourcesToR1">Change resources to R1</button>
<bryntum-checkbox
text="Stripe Feature"
:checked="false"
@action="handleToggle($event, 'stripe')"
/>
<bryntum-checkbox
text="Column Lines Feature"
:checked="true"
@action="handleToggle($event, 'columnLines')"
/>
</div>
<bryntum-scheduler
ref="scheduler"
v-bind="schedulerConfig"
:stripeFeature="stripe"
:columnLinesFeature="columnLines"
/>
</div>
</template>
<script>
import {
BryntumScheduler,
BryntumDemoHeader,
BryntumCheckbox
} from "@bryntum/scheduler-vue";
import { schedulerConfig } from "./AppConfig.js";
export default {
name: "App",
components: {
BryntumDemoHeader,
BryntumScheduler,
BryntumCheckbox
},
methods: {
handleToggle({ checked }, feature) {
this[feature] = { disabled: !checked };
},
changeResourcesToR10() {
this.schedulerConfig.events = this.schedulerConfig.events.map(ev => {
if (ev.id !== 1) return ev;
ev.resourceId = "r10";
return ev;
})
console.log(this.schedulerConfig.events);
},
changeResourcesToR1() {
this.schedulerConfig.events = this.schedulerConfig.events.map(ev => {
if (ev.id !== 1) return ev;
ev.resourceId = "r1";
return ev;
})
}
},
mounted() {
this.scheduler = this.$refs.scheduler.schedulerInstance;
},
data() {
return {
schedulerConfig,
stripe: { disabled: true },
columnLines: { disabled: false },
scheduler: null
};
}
};
</script>
<style lang="scss">
@import "./App.scss";
</style>
