javascript - 如何自动将用户分配到日历中的下一个可用时间段？

Question

我有一个标准的 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>

Answer 1

恢复 session 列表。

按开始日期排序并检查是否有适合您的新 session 的时间间隔:

(meeting[i+1].startDate - meeting[i].enddate > (新 session 时间))

这会让您走上正轨。