Sapui5 所有约会都有不同的行（sap.m.PlanningCalendar）

我正在尝试将带有“sap.me.overlappCalendar”的旧应用程序移植到新的“sap.m.PlanningCalendar”，我只想显示一个人的约会。我发现约会的显示方式有所不同

我使用的模板是：

var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", {
        appointments:[
        new sap.ui.unified.CalendarAppointment({
            startDate: {
                path: 'CalendarModel>DateFrom',
                formatter: util.Formatter.toStartDate
            },
            endDate: {
                path: 'CalendarModel>DateTo',
                formatter: util.Formatter.toEndDate
            },
            title: "{CalendarModel>CardName} - {CalendarModel>ProjectName}",
            text: "Gewerkte uren: {CalendarModel>WorkedHours}",
            type: "Type04",
            tentative: false,
            key: "{CalendarModel>ReportID}"
        })]
});

通过以下方式绑定到日历控件：

bindAggregation("rows", "CalendarModel>/Items/", oTemplateRow);

数据显示在日历中，但显示方式不同

旧历：

新日历：

---

我应该怎么做才能获得相同的输出

您必须更改模型：例如，在模型的根节点创建一个与日历行相对应的数组，每一行都应该包含一个约会数组。 示例json文件可以如下所示：

{
    "items": [{
        "title": "Item1",
        "appointments": [{
            "text": "appointment1",
            "start": "2017-02-17T09:30:00",
            "end": "2017-02-17T13:00:00"
        }, {
            "text": "appointment2",
            "start": "2017-02-17T09:45:00",
            "end": "2017-02-17T13:10:00"
        }]
    }, {
        "title": "Item2",
        "appointments": [{
            "text": "appointment3",
            "start": "2017-02-17T10:30:00",
            "end": "2017-02-17T14:00:00"
        }, {
            "text": "appointment4",
            "start": "2017-02-17T10:45:00",
            "end": "2017-02-17T14:10:00"
        }]
    }]
}

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("QuickStartApplication.controller.View1", {

        onInit: function() {
            var oCale = this.getView().byId("PC1");

            var oModel = this.getOwnerComponent().getModel("CalendarModel");

            this.getView().setModel(oModel, "CalendarModel");

            var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", { title: "{CalendarModel>title}" });

            oTemplateRow.bindAggregation("appointments", {
                path: "CalendarModel>appointments",
                template: new sap.ui.unified.CalendarAppointment({
                    title: "{CalendarModel>text}",
                    startDate: {
                        path: "CalendarModel>start",
                        formatter: this.toDate
                    },
                    endDate: {
                        path: "CalendarModel>end",
                        formatter: this.toDate
                    }
                }),
                templateShareable: true
            });

            oCale.bindAggregation("rows", {
                path: "CalendarModel>/items",
                template: oTemplateRow,
                templateShareable: true
            });

        },

        toDate: function(sValue) {
            if (sValue) {
                return new Date(sValue); //
            }
        }

    });

});

“项目”是一个日历行数组，每个项目都包含约会数组。控件的绑定应该更复杂。我使用这样一个文件作为JSON模型的基础，控制器代码如下所示：

{
    "items": [{
        "title": "Item1",
        "appointments": [{
            "text": "appointment1",
            "start": "2017-02-17T09:30:00",
            "end": "2017-02-17T13:00:00"
        }, {
            "text": "appointment2",
            "start": "2017-02-17T09:45:00",
            "end": "2017-02-17T13:10:00"
        }]
    }, {
        "title": "Item2",
        "appointments": [{
            "text": "appointment3",
            "start": "2017-02-17T10:30:00",
            "end": "2017-02-17T14:00:00"
        }, {
            "text": "appointment4",
            "start": "2017-02-17T10:45:00",
            "end": "2017-02-17T14:10:00"
        }]
    }]
}

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";

    return Controller.extend("QuickStartApplication.controller.View1", {

        onInit: function() {
            var oCale = this.getView().byId("PC1");

            var oModel = this.getOwnerComponent().getModel("CalendarModel");

            this.getView().setModel(oModel, "CalendarModel");

            var oTemplateRow = new sap.m.PlanningCalendarRow("RowTemplate", { title: "{CalendarModel>title}" });

            oTemplateRow.bindAggregation("appointments", {
                path: "CalendarModel>appointments",
                template: new sap.ui.unified.CalendarAppointment({
                    title: "{CalendarModel>text}",
                    startDate: {
                        path: "CalendarModel>start",
                        formatter: this.toDate
                    },
                    endDate: {
                        path: "CalendarModel>end",
                        formatter: this.toDate
                    }
                }),
                templateShareable: true
            });

            oCale.bindAggregation("rows", {
                path: "CalendarModel>/items",
                template: oTemplateRow,
                templateShareable: true
            });

        },

        toDate: function(sValue) {
            if (sValue) {
                return new Date(sValue); //
            }
        }

    });

});

请注意，首先创建行模板，然后将其“约会”聚合绑定到“CalendarModel”模型的“约会”属性，并使用模板创建CalendarAppointment。然后参照行模板为日历行创建绑定