1

I tried to bind an array of dates to sap.ui.unified.Calendar but without success. I am sure I am not far from the solution.

Here is the code:

var oCal = new sap.ui.unified.Calendar();
var oModel2 = new sap.ui.model.json.JSONModel([
    {myDate: new Date("2018-01-10"), tt:""},
    {myDate: new Date("2018-01-11"), tt:""},
    {myDate: new Date("2018-01-12"), tt:""},
]);
sap.ui.getCore().setModel(oModel, "MyData3");
var oItemTemplate = new sap.ui.unified.DateRange({
    startDate: "{MyData3>myDate}",
    endDate: "{MyData3>myDate}"
});     
oCal.bindAggregation("selectedDates", "MyData3>/", oItemTemplate);

I don't get any exception. The model has the data filled with 3 objects of type Date but I do not have those 3 dates pre-selected in the calendar.

If I fill the selectedDates aggregation manually (without binding) it will select those 3 dates.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
user3462883
  • 27
  • 4

1 Answers1

0

Here is a working minimal example:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/unified/Calendar",
  "sap/ui/unified/DateRange",
  "sap/ui/model/json/JSONModel",
], (Calendar, DateRange, JSONModel) => new Calendar({
  singleSelection: false
}).bindAggregation("selectedDates", {
  path: "MyData3>/",
  template: new DateRange({
    startDate: "{MyData3>myDate}",
    endDate: "{MyData3>myDate}",
  }),
}).setModel(new JSONModel([
  {myDate: new Date("2018-01-10")},
  {myDate: new Date("2018-01-11")},
  {myDate: new Date("2018-01-13")},
]), "MyData3").placeAt("content")));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.unified"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatVersion="edge"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>

I assume the provided code in your question is not a real excerpt from your project. Otherwise, you'd have got a ReferenceError saying that the variable oModel is undefined (instead, oModel2 is defined). Apart from this, the actual reason why the binding did not work must be because the model is set on the core while the Calendar control is a descendant of ComponentContainer. In that case, the Core model won't be propagated to the Component.

--> Avoid setting models on the Core if the app is component-based.

If not already done: In order to display multiple selected dates in the first place, the Calendar property singleSelection has to be disabled explicitly since it's enabled by default.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
  • Hi, Great! It is working. I did not know that the Calendar has its own setModel method. Why is there a difference between the core Model and the Calendar Model ? Thanks again. – user3462883 Jan 03 '18 at 07:12
  • @user3462883 All modules including [Calendar](https://ui5.sap.com/#/api/sap.ui.unified.Calendar), which are extended from the [ManagedObject](https://ui5.sap.com/#/api/sap.ui.base.ManagedObject/methods/setModel), offer the API `set` / `getModel` implicitly. Calling such APIs from a high-level module such as Calendar are just delegated to the ManagedObject prototype. – Boghyon Hoffmann Jan 03 '18 at 10:13