我有一个标准的 Sap UI5 日历，目前允许用户安排 session 室的约会，并在提交后按时间 block 显示。我想添加的一个很酷的功能是在约会表单上创建一个按钮，自动将用户分配到下一个可用/空闲时间段。作为 SAP UI5 的新手，如何实现？
这是一个有效的 example我所拥有的。单击日历可打开约会表单
Controller
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/Dialog',
'sap/m/Button'
],
function(Controller, JSONModel,Dialog, Button) {
"use strict";
var PageController = Controller.extend("sample1.View1", {
onInit: function () {
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2015", "11", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Meeting Room 1",
role: "101",
appointments: [
{
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
}
],
headers: [
{
start: new Date("2015", "11", "16", "0", "0"),
end: new Date("2015", "11", "16", "23", "59"),
title: "Private",
type: "Type05"
},
]
},
{
pic: "sap-icon://employee",
name: "Meetin Room 2",
role: "201",
appointments: [
{
start: new Date("2015", "11", "15", "08", "30"),
end: new Date("2015", "11", "15", "09", "30"),
title: "Meeting",
type: "Type02",
tentative: false
},
{
start: new Date("2015", "11", "15", "10", "0"),
end: new Date("2015", "11", "15", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2015", "11", "15", "11", "30"),
end: new Date("2015", "11", "15", "13", "30"),
title: "Lunch",
type: "Type03",
tentative: true
}
],
headers: [
{
start: new Date("2015", "11", "15", "8", "0"),
end: new Date("2015", "11", "15", "10", "0"),
title: "Reminder",
type: "Type06"
}
]
}
]
});
this.getView().setModel(oModel);
},
handleAppointmentSelect: function (oEvent) {
var oAppointment = oEvent.getParameter("appointment");
if (oAppointment) {
alert("Appointment selected: " + oAppointment.getTitle());
}else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
alert(sValue);
}
},
handleIntervalSelect:function(oEvent){
var dialogData = {
newEntry: {
start: oEvent.getParameter("startDate"),
end: oEvent.getParameter("endDate"),
title: "",
info: "",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
people: this.getView().getModel().getProperty("/people").map(function(p,i){ return { name: p.name, index: i, selected: true }; }) //A List of all people. All selected by default.
};
var dialogModel = new JSONModel(dialogData);
var that = this;
var planningDialog = new Dialog({
title:"Add Appointment",
content: sap.ui.xmlview({viewName:"sample1.AppointmentDialog"}).setModel(dialogModel),
leftButton: new Button({
text: "Cancel",
press: function(){
planningDialog.close();
planningDialog.destroy();
}}),
rightButton: new Button({
text: "Save",
type: "Accept",
press: function(){
planningDialog.close();
that.addAppointment(dialogData);
}}),
});
planningDialog.open();
},
addAppointment:function(data){
var model = this.getView().getModel();
var peopleList = model.getProperty("/people");
data.people
.filter(function(p){return p.selected;})
.forEach(function(p){
peopleList[p.index].appointments.push(data.newEntry);
});
model.setProperty("/people",peopleList); //Updates Bindings
}
});
return PageController;
});
查看
<mvc:View
controllerName="sample1.View1"
xmlns:mvc="sap.ui.core.mvc"
xmlns:unified="sap.ui.unified"
xmlns="sap.m">
<VBox class="sapUiSmallMargin">
<PlanningCalendar
id="PC1"
startDate="{path: '/startDate'}"
rows="{path: '/people'}"
appointmentSelect="handleAppointmentSelect"
intervalSelect=".handleIntervalSelect">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
icon="{pic}"
title="{name}"
text="{role}"
appointments="{appointments}"
intervalHeaders="{headers}" >
<appointments>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
text="{info}"
type="{type}"
tentative="{tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
icon="{pic}"
title="{title}"
type="{type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>
</mvc:View>
最佳答案
恢复 session 列表。
按开始日期排序并检查是否有适合您的新 session 的时间间隔:
(meeting[i+1].startDate - meeting[i].enddate > (新 session 时间))
这会让您走上正轨。
关于javascript - 如何自动将用户分配到日历中的下一个可用时间段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40307484/