53306

Bind selectedDates Aggregation for Calendar

Question:

I tried to bind an array of dates to <a href="https://openui5.hana.ondemand.com/#/api/sap.ui.unified.Calendar" rel="nofollow">sap.ui.unified.Calendar</a> 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.

Answer1:

Here is a working minimal example:

<pre class="snippet-code-js lang-js prettyprint-override">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"))); <pre class="snippet-code-html lang-html prettyprint-override"><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 <a href="https://openui5.hana.ondemand.com/#/api/sap.ui.core.ComponentContainer" rel="nofollow">ComponentContainer</a>. In that case, the Core model won't be propagated to the Component.

--> <a href="https://stackoverflow.com/a/42251431/5846045" rel="nofollow">Avoid setting models on the Core if the app is component-based.</a>

<hr />

If not already done: In order to display multiple selected dates in the first place, the Calendar property <a href="https://openui5.hana.ondemand.com/#/api/sap.ui.unified.Calendar/methods/setSingleSelection" rel="nofollow">singleSelection</a> has to be disabled explicitly since it's enabled by default.

Recommend

  • Symfony2 Doctrine Unrecognized field:
  • Copying/using Python files from S3 to Amazon Elastic MapReduce at bootstrap time
  • eclipse not giving any help on CTRL + Space [duplicate]
  • Updating a 'master' JSON object by adding data to a subobject
  • What is the PowerShell equivalent of LINQ's All()?
  • Mocking OpenXML with Moq
  • JSON data - Group by days of the week(Sun,Mon,Tue, Wed,Thu,Fri,Sat) using Javascript/Jquery
  • Waiting for QProcess to finish or duration to exceed [duplicate]
  • How to build executable with pyinstaller that uses pycryptodome?
  • The output is not displayed in its entirety [8086 assembly]
  • Identify xml text elements with Schematron
  • GitLab Continuous Deployment to Azure Web App
  • Spring Security OAuth 2 with form login
  • ODBC connection to an .accdb file
  • Javascript getting the value of an input in a table [duplicate]
  • Authorization Policies/Gates for Laravel 5.3 web app consuming own API w/ Passport
  • Google Chrome compositor-driven animation affected by jam in main thread
  • Customize jQuery submenu positioning
  • Highcharts Drawing a line with chart.renderer.path
  • Python C binding error
  • using vtkTimerCallback with QVTKRenderWindowInteractor not working
  • How to add multiple legend titles (columns) in ggplot
  • Force fading edge on TextView
  • Align microsoft access queries
  • Load php page results into div with ajax with link?
  • Firestore: Version history of documents
  • How to display converted time zones in a 'generic week' (Sunday thru Saturday)?
  • Keep rows with certain values always at the bottom while sorting in jquery tablesorter plugin
  • How can i move Clearcase dyamic/snapshot views to another host (Linux)
  • Google Spreadsheet Script to Blink a range of Cells
  • Comparing variables with strings bash
  • How to use Streams api peek() function and make it work?
  • How to decleare char *const argv[] in swift [duplicate]
  • Did not understand process of initialize in swift programming
  • How to get rgb from transparent pixel in js
  • Make checkout phone field optional for specific countries in WooCommerce
  • WPF custom control and direct content support
  • Write to .csv file with PHP (Commas in Data Error)
  • JavaScript RegExp Replace