Alloy UI - редактирование события с выбранными значениями (в списке выбора)
Возможно, я ошибся, но мне удалось отобразить 2 варианта списка выбора во всплывающем окне календаря, и я могу сохранить данные в БД.
Сейчас я борюсь за то, чтобы щелкнуть событие для редактирования, как я могу передать значения обратно, чтобы список выбора отображал текущие значения. Чтобы пойти с этим, как я могу передать идентификатор базы данных, назначенный этому событию тоже?
Я показал мой код ниже:
<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>
заранее спасибо,
Радж