我可能在这方面做错了但我已经设法在我的日历弹出窗口中显示2个选择列表选项,并且能够将数据保存到数据库。
我现在苦苦挣扎的是点击要编辑的事件时,如何传回值以使选择列表显示当前值。为此,我如何传递分配给此事件的数据库ID?
到目前为止,我已经显示了我的代码:
<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>
提前感谢,
拉吉