AlloyUI Scheduler - add custom attribute after loading from database

Question

I've been struggling with this issue for a couple of days now, basically what I'm trying to accomplish is to add a custom attribute to each event that I load from the database. I searched around for a good while and found the addAttr function among other functions. this function works perfectly fine when adding and saving a new event, but apparently it doesn't work when using it on the events that I loaded from the database. I've tried to add it before creating the scheduler and after creating the scheduler(by using getEvents and then modifying that data and using resetEvents to update them) but that didnt work either..

function Schedule( boundingbox, events )
{
    var self = this;
    this.schedule = null;
    this.events = events || [];
    this.boundingbox = boundingbox || "";

    console.log( self.events );

    YUI({ lang: 'nl-NL' }).use(
        'aui-scheduler',
        function (Y) {
            var events = self.events;

            var dayView = new Y.SchedulerDayView({ isoTime: true });
            var weekView = new Y.SchedulerWeekView({ isoTime: true });
            var monthView = new Y.SchedulerMonthView({ isoTime: true });

            var eventRecorder = new Y.SchedulerEventRecorder({
                on: {
                    save: function (event) {
                        var instant = this;
                        $.ajax({
                            type: "POST",
                            url: "/EventHandler",
                            data: { "content": this.getContentNode().val(), "startDate": new Date( this.get('startDate') ).getTime() / 1000, "endDate": new Date( this.get('endDate') ).getTime() / 1000 },
                            datatype: "json",
                            success: function (output) {
                                output = JSON.parse($.trim(output));
                                instant.addAttr("eventid", {
                                   value: output.data.EV_ID,

                                   setter: function(val) {
                                       return output.data.EV_ID;
                                   },

                                   validator: function(val) {
                                       return Y.Lang.isNumber(val);
                                   }
                                });
                            }
                        });
                    },
                    edit: function (event) {
                        var instance = this;
                        console.log(instance.getAttrs()); // returns a list of attributes, eventid is not among them
                        console.log(instance.get("eventid")); // returns undefined
                        self.schedule.getEvents()[0].get( "eventid" ) // returns undefined
                    },
                    delete: function( event ) {

                    }
                }
            });

            self.schedule = new Y.Scheduler({
                strings: { agenda: 'Agenda', day: 'Dag', month: 'Maand', today: 'Vandaag', week: 'Week', year: 'Jaar',  'description-hint': "Een nieuwe afspraak" },
                activeView: weekView,
                boundingBox: self.boundingbox,
                date: new Date(),
                eventRecorder: eventRecorder,
                firstDayOfWeek: 1,
                items: self.events,
                render: true,
                views: [dayView, weekView, monthView]
            });


            $.each( self.schedule.getEvents(), function( key, value ) {
                value.addAttr( "eventid", {
                   value: 123,

                   setter: function(val) {
                       return 123;
                   },

                   validator: function(val) {
                       return Y.Lang.isNumber(val);
                   }
               });
            } );

            console.log(self.schedule.getEvents() ); // returns an array of events
            console.log( self.schedule.getEvents()[0].get( "eventid" ) ); // returns the eventid: 123
        }
    );
}

As you can see I've been trying to debug the values to see if it works, and for some reason when I log the event id right after I updated them it returns the correct eventid, but when I do it in the on-edit it returns undefined.

Does anybody know what I'm doing wrong here?

Answer 1

To target the ScheduleEvent newly created, you need to store event.newSchedulerEvent in the save function.

Then you'll be able to :

newSchedulerEvent.set("eventid", output.data.EV_ID)