I am just loading data from server and binding scheduler with the data. I am using "beforeEventAdd" event to invoke an api and save the new event in backend.
In my configuration of Scheduler, I have not defined any store. Can you point me to some example in React of how to define the store and pass it to scheduler.
We have a simple example called Event Editor with Cascading combos. You can see how it's implemented in Scheduler/examples/eventeditor-combos/app.js
Here are few steps to make saving work:
Define your model fields. autoExposeFields is enabled, but to make it work need to have these fields defined on the first record. So cannot rely on this.
class Task extends EventModel {
static get fields() {
return ['MyField'];
}
}
Need to set your new model class to be used in Event Store. Instead of events need to specify eventStore and set modelClass and data:
eventStore : {
// specify model class
modelClass : Task,
data : tasks // {schedulerData.events}
}
Need to specify 'name' property on the field you're adding, which should match data field. Otherwise loading/saving will not work automatically.
const field = WidgetHelper.createWidget({
type:'combo',
name : 'MyField', // matches data field in Task model
ref : 'myField' // then you can always get it in the editor as editor.widgetMap.myField
label: 'My field',
id: "MyField", // not sure this is needed
items: mapOfIdAndText
});
To summarize, auto loading/saving to custom fields in Event Editor works if:
Data field is defined on the model
Widget field has 'name' property which matches the data field
Best,
Pavel
P.S. Please note, all code snippets are simple javascript and they are not supposed to be used directly. Please adjust them according to your needs and to React application you're working with.
I can get the value of custom field using approach you mentioned. In the provided react samples - the way to set data is following and incrementing resourceVersion and eventVersion when we receive data from api.
But how do set new data in the store. Is there an comprehensive example in react where "eventStore" is used
I see you're confused by our Basic example in example/react/typescript. This example loads data to individual stores. And our Scheduler Wrapper (Scheduler/examples/react/_shared/src/lib/BryntumScheduler.js) which is used in this demo contains "shouldComponentUpdate" function which let react know if scheduler should be rerendered. In the demo we set version to 0 initially:
and after load we increment it to let shouldComponentUpdate know that data changed:
fetch('data/data.json').then(response => {
response.json().then(data => {
this.setState({
// Increment these to notify BryntumScheduler that it should process events/resources
eventsVersion : 1, // increment current version
resourcesVersion : 1, // increment current version
events : data.events.rows,
resources : data.resources.rows,
timeRanges : data.timeRanges.rows
});
});
});
But the approach above is a bit out-of-dated. We kept it to show backward compatibility. Basically we recommend to use our CrudManager to handle all data at once. You don't need to provide events or eventStore individually. You can see how it works in Filtering and RecurringEvents demos:
Scheduler/examples/react/typescript/filtering
Scheduler/examples/react/typescript/recurring-events
So if we take for example Scheduler/examples/react/typescript/filtering/src/App.tsx, you can see that only crudManager is assigned:
Based on your suggestion - we are moving our implementation to CrudManager - Things are starting to work but I am seeing one strange behavior in the GET request being sent by CrudManager -
Following is what crud manager sends in Query parameters -
My crud manager configuration looks like following
And I have seen this - store-6 comes only when I include assignmentStore in the crud manager. Else it goes away but then assignments don't get saved.
Is this a convention to identify assignment store by "store-6"
EventStore and ResourceStore have storeId specified by default ("events" and "resources"). But Assignments store doesn't have default storeId. It will be fixed in the next major release. Meanwhile please specify "assignments" as an ID for the AssignmentStore manually, similar to what we do in our Scheduler/examples/multiassign-with-dependencies/app.js example:
const assignmentStore = new AssignmentStore({
id : 'assignments'
});
....
crudManager : {
assignmentStore,
transport : {
load : {
url : 'data/data.json'
}
},
autoLoad : true
}