Our pure JavaScript Scheduler component


Post by Landpoint »

Hi,

I would like to add an event listener in my code to handle the 'commit' event of an EventStore.
I declare my code as such:
    this.events = [];
    this.schedule = new Schedule({
        events: this.events
    });
    
I tried to register to events by doing:
 this.schedule.events.commit = this.onCommit;
Which compiles, but does not seem to do anything or call my custom onCommit funciton.

Thanks,

Post by mats »

You need to operate on the eventStore:
 this.schedule.eventStore.on('commit', this.onCommit);

Post by Landpoint »

OK,
Thanks for the response.
I tried that, but it still didn't work.

Here is my code
            
        methods:
        {
            onCommit:function(source, changes){
                console.log(source);
            }
        },
        mounted: function () {
            this.resources = [];
            this.events = [];
            this.getData();

            this.schedule = new Schedule({
                // id: 'schedule',
                appendTo: 'container2',
                events: this.events,
                viewPreset: 'weekAndDayLetter',
                columns: this.columns,
                //rowHeight=60,
                barMargin: 5,

                //resources:this.resources,
                timeRanges: this.timeRanges,
                startDate: this.startDate,
                endDate: this.endDate,
                // eventRenderer:this.eventRenderer,

                eventStyle: "colored",
                eventselectionchange: this.onEventSelectionChange

            });
            this.schedule._eventStore.on("commit", this.onCommit);
            console.log(this.schedule);
            
            
When I inspect the this.schedule, it shows that the commit event function is empty
Attachments
no_event.png
no_event.png (115.04 KiB) Viewed 1807 times

Post by Maxim Gorkovsky »

Hello.
It may be not clear from the doc article but commit event is not fired if you are using local store. Local store is a store without create/delete/update urls configured. In that case records are committed immediately. If you are calling commit manually, you can fire some other event, like:
scheduler.eventStore.commit().then(() => scheduler.eventStore.trigger('mycommit'))
I opened ticket to discuss this behavior: https://app.assembla.com/spaces/bryntum/tickets/7591

And also console shows that commit method on your store is probably incorrect. Did you try to override it? If that change is unintentional, investigate where you use 'commit' name and amend.

Please do not to use
scheduler._eventStore
. That is private, public API is
scheduler.eventStore
.

Post by Landpoint »

Hi,
I tried both actually.

Since I am not using the CRUD setup on the scheduler, I need to know when an event is changed, so I can re-serialize the change back up to my sql data store. So I was under the impression that attaching to the commit event would be best.

Post by Maxim Gorkovsky »

If you need to know when event was changed, there is a change event on the store which can tell you everything. Or you can just check store changes at any point of time. Or listen to beforecommit event. Smth like:
eventStore.on({ beforecommit: ({ changes }) => { serializeChanges(changes) } })
button.on({ click : () => eventStore.commit() })
Benefit of this approach:
1. you have access to changes only, but still can access all datatset if you need
2. you know that commit was called, which is a nice entry point if you want to only work with changes
3. next time commit is called you'll have different set of changes

Or you can serilize them every time you call commit:
eventStore.commit().then(() => serializeData(eventStore.getRange()))
// or call just after, if you don't like promises. changes are applied already
// serializeData(eventStore.getRange())

Post by Landpoint »

Ahh Yes,
Change seems to work for me instead of Commit as you mentioned previously.
Thanks!

Post Reply