Our powerful JS Calendar component


Post by niranjan »

I am trying to bind the data from a JSON file to the <BryntumCalendar> wrapper.
When I add an event to the calendar, how to capture the data from the calendar in one single event?

I have attached the data in the handleDataChange event

I do not see the resourceId in this object.

How do I capture the data from the calendar and save it?

Can you direct me to the documentation which describes the way I can use my own JSON to populate the calendar and use that to update the events and changes to the calendar data?

Edit :
In the data i use to show the events on the calendar, if the events array is empty(see attached JSON), the resource selection behaves differently.

Attachments
Save Calendar Event Data.json
(386 Bytes) Downloaded 21 times
Screen Shot 2023-03-16 at 12.02.32 PM.png
Screen Shot 2023-03-16 at 12.02.32 PM.png (131.78 KiB) Viewed 339 times
Last edited by niranjan on Thu Mar 16, 2023 9:08 am, edited 1 time in total.

Post by Animal »

The very easiest way to get started is to allow the CrudManager to load the data for you.

Configure your Calendar with this:

    crudManager : {
        loadUrl  : '<URL of your JSON source>',
        autoLoad : true
    }

The JSON from that URL will be loaded as EventModel record instances into the EventStore of the calendar.


Post by niranjan »

I have the data loaded onto the calendar using the inline method. If I need to start with a clean slate and add events to the calendar and update my JSON database for future use, I am not able to get the required data.
I see events firing from handleDataChange event using data from EventStore and AssignmentStore separately.
If I add an event to an empty calendar, the resource id is not available. If I go and change the resource, the event trigger uses the AssignmentStore to amaned the resources and it triggeres Add, Remove and Update actions.

How can this be handled in 1 single event that has all the data available.

Attachments
Data with Empty Events.json
(805 Bytes) Downloaded 23 times

Post by Animal »

I don't really understand what you are saying.

I'm guessing that you want to save any changes that are made.

If that is in fact what you are asking, then not using CrudManager makes work for yourself. You will have to do what it does. Which is quite a lot.

Check for the changes to the eventStore https://bryntum.com/products/gantt/docs/api/Core/data/Store#property-changes

Send these to your server which will update the database end send back the results (Some updates may succeed, and some fail). These results will then be reconciled with the eventStore when the response returns.

Or, what a lot of people do nowadays is just throw the whole new dataset at the store on sync.


Post by niranjan »

Let me check this.


Post by marcio »

Ok, we'll be waiting for your feedback.

Best regards,
Márcio


Post by niranjan »

Hi
I am now able to capture the data from the EventStore and save the data to my database.
I see on issue here.
When I create a new event, the default resource is selected for example Calendar A. Now, I change the calendar from A to B, give the name and date and click on Save button.
This will generate 2 update events on the Event Store, one with the resource id of the Calendar A and the next event with the resource id of Calendar B.
This is causing updating of Calendar A's data and new entry for Calendar Bin my database.

How do I handle this?


Post by Animal »

You respond to *all** change events fired by the EventStore immediately? That does not seem like a good design pattern.

This is another thing that is built into the CrudManager: https://www.bryntum.com/products/calendar/docs/api/Calendar/data/CrudManager#config-autoSyncTimeout

You should sync on a delay so that multiple changes caused by code changing several things are coalesced into one sync operation.

You are making difficulties for yourself by not taking the simple option of using a CrudManager.


Post by saki »

I think that we can find the best answer here: https://bryntum.com/products/calendar/docs/guide/Calendar/integration/react/events#using-datachange-event-to-synchronize-data

Listening to dataChange event keeps you app updated of each and every user change.


Post by niranjan »

saki,
I am listening to "onDataChange" event to capture the data from the calendar.
When I add a new event on the calendar and change the calendar resource, the event gets triggered twice for the EventStore with action update.

Kindly see the below log.

onDataChange====> AssignmentStore add EMP_317933_23
onDataChange====> EventStore add EMP_317933_23
onDataChange====> AssignmentStore update EMP_317933_23
onDataChange====> EventStore update EMP_317933_23
onDataChange====> EventStore update EMP_317933_20

onDataChange====> AssignmentStore update EMP_317933_20

See the resource id's EMP_317933_23 & EMP_317933_20 in the rows 5 and 6.
The resource EMP_317933_23 is the default selected resource. I change it to EMP_317933_20. However, I get both the events after I click the Save button.

How do I sync to the last event?


Post Reply