Planning CalendarSAPUI5コントロールを含むアプリケーションを作成しました。私はこのデモに触発されました：https：//sapui5.hana.ondemand.com/#/sample/sap.m.sample.PlanningCalendarSingle/preview
XMLビューでモデルをカレンダーコントロールにバインドする際に問題が発生しました。
上記のデモでは、モデルはコントローラー内にハードコードされており、次のようになります。
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "08", "8", "0"),
people: [{
name: "John Miller",
appointments: [{
start: new Date("2016", "10", "15", "10", "0"),
end: new Date("2016", "11", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2016", "09", "13", "9", "0"),
end: new Date("2016", "01", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2016", "07", "10", "0", "0"),
end: new Date("2016", "09", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2016", "07", "1", "0", "0"),
end: new Date("2016", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
},
{
start: new Date("2017", "0", "03", "0", "01"),
end: new Date("2017", "0", "04", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "05", "08", "30"),
end: new Date("2017", "0", "05", "09", "30"),
title: "Meet Donna Moore",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "08", "10", "0"),
end: new Date("2017", "0", "08", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "09", "0", "0"),
end: new Date("2017", "0", "09", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type02",
tentative: false
},
{
start: new Date("2017", "0", "11", "0", "0"),
end: new Date("2017", "0", "12", "23", "59"),
title: "Education",
info: "",
type: "Type03",
tentative: false
},
{
start: new Date("2017", "0", "16", "00", "30"),
end: new Date("2017", "0", "16", "23", "30"),
title: "New Product",
info: "room 105",
type: "Type04",
tentative: true
},
{
start: new Date("2017", "0", "18", "11", "30"),
end: new Date("2017", "0", "18", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "20", "11", "30"),
end: new Date("2017", "0", "20", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "0", "18", "0", "01"),
end: new Date("2017", "0", "19", "23", "59"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "0", "23", "08", "00"),
end: new Date("2017", "0", "24", "18", "30"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "0", "25", "0", "01"),
end: new Date("2017", "0", "26", "23", "59"),
title: "Workshop",
info: "regular",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "30", "10", "0"),
end: new Date("2017", "4", "33", "12", "0"),
title: "Working out of the building",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "8", "1", "00", "30"),
end: new Date("2017", "10", "15", "23", "30"),
title: "Development of a new Product",
info: "room 207",
type: "Type03",
tentative: true
},
{
start: new Date("2017", "1", "15", "10", "0"),
end: new Date("2017", "2", "25", "12", "0"),
title: "Team collaboration",
info: "room 1",
type: "Type01",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2017", "2", "13", "9", "0"),
end: new Date("2017", "3", "09", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2017", "03", "10", "0", "0"),
end: new Date("2017", "05", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2017", "07", "1", "0", "0"),
end: new Date("2017", "09", "31", "23", "59"),
title: "New quarter",
type: "Type10",
tentative: false
}
],
headers: [
{
start: new Date("2017", "0", "08", "0", "0"),
end: new Date("2017", "0", "08", "23", "59"),
title: "National holiday",
type: "Type04"
},
{
start: new Date("2017", "0", "10", "0", "0"),
end: new Date("2017", "0", "10", "23", "59"),
title: "Birthday",
type: "Type06"
},
{
start: new Date("2017", "0", "17", "0", "0"),
end: new Date("2017", "0", "17", "23", "59"),
title: "Reminder",
type: "Type06"
}
]
}
]
});
this.getView().setModel(oModel);
一方、XMLビューは次のようになります。
<PlanningCalendar
id="PC1"
showRowHeaders="false"
startDate="{path: '/startDate'}"
viewKey="Day"
rows="{path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height"
tooltip="Toggle Day Names Line"
press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
appointments="{path : 'appointments', templateShareable: 'true'}"
intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<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>
まったく同じコードをコピーしましたが、1つ違いがあります。私のモデルはデフォルトのビューモデルではありませんが、IDがあります：
this.getView().setModel(oModel, "calendarModel");
もちろん、その変更のために、xmlビューに書き込むことはできません。
rows="{path: '/people'}"
代わりに、私は次のようなものを書きました：
<PlanningCalendar id="PC1" showRowHeaders="false" startDate="{path: '/startDate'}" viewKey="Day" rows="{path: 'calendarModel>/people'}"
appointmentsVisualization="Filled" appointmentSelect="handleAppointmentSelect" intervalSelect="handleIntervalSelect"
showEmptyIntervalHeaders="false">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
<ToolbarSpacer/>
<ToggleButton icon="sap-icon://decrease-line-height" tooltip="Toggle Day Names Line" press="toggleDayNamesLine"/>
</toolbarContent>
<rows>
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<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>
問題は、予定が表示されないことです。計画カレンダーコントロールにはまだ1つの行が表示されますが（そのモデルには1人しかいないため）、完全に空です。
私の道に何か問題があるのではないかと思います。
<PlanningCalendarRow appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
しかし、私はそれを正しく書く方法がわかりません。
重要な注意：「calendarModel」モデルをデフォルトのビューモデル（IDなし）に変更すると、すべてが完全に正常に機能します。モデルからすべての予定を確認できます。
モデルに名前を付けたので、バインディングでそれを指定する必要があります。これは機能するはずです：
<mvc:View
controllerName="sap.m.sample.PlanningCalendar.Page"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:unified="sap.ui.unified"
xmlns="sap.m">
<VBox class="sapUiSmallMargin">
<PlanningCalendar
id="PC1"
startDate="{model: 'calendarModel', path: '/startDate'}"
rows="{model: 'calendarModel', path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
showEmptyIntervalHeaders="false"
showWeekNumbers="true">
<toolbarContent>
<Title text="Title" titleStyle="H4"/>
</toolbarContent>
<rows>
<PlanningCalendarRow
icon="{pic}"
title="{name}"
text="{role}"
appointments="{model: 'calendarModel', path : 'appointments', templateShareable: 'true'}"
intervalHeaders="{model: 'calendarModel', path: 'headers', templateShareable: 'true'}">
<customData>
<core:CustomData key="emp-name" value="{calendarModel>name}" writeToDom="true"/>
</customData>
<appointments>
<unified:CalendarAppointment
startDate="{calendarModel>start}"
endDate="{calendarModel>end}"
icon="{calendarModel>pic}"
title="{calendarModel>title}"
text="{calendarModel>info}"
type="{calendarModel>type}"
tentative="{calendarModel>tentative}">
</unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment
startDate="{calendarModel>start}"
endDate="{calendarModel>end}"
icon="{calendarModel>pic}"
title="{calendarModel>title}"
type="{calendarModel>type}">
</unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
<Label text="Add available built-in views to the example:"/>
<MultiComboBox
selectionFinish="handleSelectionFinish"
width="230px"
placeholder="Choose built-in views">
<items>
<core:Item key="Hour" text="Hour" />
<core:Item key="Day" text="Day" />
<core:Item key="Month" text="Month" />
<core:Item key="Week" text="1 week" />
<core:Item key="One Month" text="1 month" />
</items>
</MultiComboBox>
</VBox>
</mvc:View>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加