Alloy UI - schedule - editing an event with values selected (in selectlist)

[Raj Gorsia，修改在6 年前。]

Hi guys,

Hope someone out there is able to provide me with some guidance.

I might have gone a wrong way around this but I have managed to get 2 selectlist options visible on my calendar popover and am able to save the data to the DB.

Where I am struggling now is when clicking an event to edit, how can I pass back in the values so that the selectlist options are preselected with the database values. To go with this, how can I pass in the database id assigned to this event so that when its been updated I have a primary key to use?

I have shown my code so far below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script>
    YUI({ debug: true, combine: false }).use(
        'aui-scheduler',
            function(Y) 
            {
                                var events = [
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />EARLY', 
                        endDate: new Date(2017, 09, 20), 
                        startDate: new Date(2017, 09, 16)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />ALL DAY', 
                        endDate: new Date(2017, 09, 02), 
                        startDate: new Date(2017, 09, 02)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />', 
                        endDate: new Date(2017, 09, 03), 
                        startDate: new Date(2017, 09, 03)
                    },
                                        {
                        id: '',
                        color: '#d2e04f',
                        borderColor: '#d2e04f',
                        titleDateFormat: '',
                        content: 'Available<br />', 
                        endDate: new Date(2017, 09, 03), 
                        startDate: new Date(2017, 09, 03)
                    }
                                    ];

                var monthView = new Y.SchedulerMonthView({ isoTime: true });
                var eventRecorder = new Y.SchedulerEventRecorder({
                    on: {
                        save: function(event) {
                            //alert('Save Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-save', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        },
                        edit: function(event) {
                            //alert('Edit Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-edit', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        },
                        delete: function(event) {
                            //alert('Delete Event:' + this.isNew() + ' --- ' + this.getContentNode() + ' --- ' + this.getClearStartDate() + ' --- ' + this.getClearEndDate());
                            var data = this.serializeForm();
                            console.log(data);
                            var ds = new Date(data.startDate);
                            var de = new Date(data.endDate);
                            $.ajax({
                                type: 'POST',
                                url: '/candidates/availability/2830b9d7cf',
                                data:  { 'do': 'availability-delete', 'booking_status': data.booking_status, 'shift_type': data.shift_type, 'date_start': ds.getFullYear() + '-' + (ds.getMonth()+1) + '-' + ds.getDate(), 'date_end': de.getFullYear() + '/' + (de.getMonth()+1) + '/' + de.getDate() },
                                success: function(data)
                                {
                                    console.log(data); // show response from the php script.
                                }
                            });
                        }
                    }, 
                    dateFormat: '%a, %b %d, %Y',
                    //content: '',
                    repeated: true,
                    headerTemplate: '<select name="booking_status"><option value="5">Available</option><option value="6">Unavailable</option></select><br /><select name="shift_type"><option>Not Required</option><option>ALL DAY</option><option>LONG DAY</option><option>EARLY</option><option>LATE</option><option>NIGHT</option><option>TWILIGHT</option></select>',
                    clientId: '2830b9d7cf'
                });

                new Y.Scheduler(
                  {
                    activeView: monthView,
                    boundingBox: '#myScheduler',
                    date: new Date(2017, 09, 13),
                    eventRecorder: eventRecorder,
                    items: events,
                    render: true,
                    views: [monthView], 
                    firstDayOfWeek: 1
                  }
                );
            }
    );
</script>

thanks in advance,

Raj