Unified Calendar

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_belize" data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    
    // var oModel = new sap.ui.model.json.JSONModel();
    // // Load JSON in model
    // oModel.loadData("products.json");
    // sap.ui.getCore().setModel(oModel);

    sap.ui.localResources("view");  //get access to view folder
    
    var app = new sap.m.App({
      initialPage: "idMain"
    });
    
    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    
    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

# SAP UI5 - Unified Calendar - Clear - nav to date

sap.ui.controller("view.Main", {
  oFormatYyyymmdd: null,

  onInit: function() {
    this.oFormatYyyymmdd = sap.ui.core.format.DateFormat.getInstance({
      pattern: "yyyy-MM-dd",
      calendarType: sap.ui.core.CalendarType.Gregorian
    });
  },


  onBeforeRendering: function() {

  },


  onAfterRendering: function() {

  },


  onExit: function() {

  },

  _updateText: function(oCalendar) {
    var oText = this.getView().byId("txtDateSelected");
    var aSelectedDates = oCalendar.getSelectedDates();
    var oDate;
    if (aSelectedDates.length > 0) {
      oDate = aSelectedDates[0].getStartDate();
      oText.setText(this.oFormatYyyymmdd.format(oDate));
    } else {
      oText.setValue("No Date Selected");
    }
  },

  onBtnPress: function(oEvent) {
			var oCalendar = this.byId("calendar");
			oCalendar.removeAllSelectedDates();
			oCalendar.addSelectedDate(new sap.ui.unified.DateRange({startDate: new Date()}));
			this._updateText(oCalendar);
			
			oCalendar.focusDate(new Date());    //navigate calendar to set current date as focus
  },
  
  onCalDateSelect: function(oEvent){
    this._updateText(oEvent.getSource());
  }

});

<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
    xmlns:u="sap.ui.unified">
    <Page title="Unified Calendar Clear">
        <content>
          <VBox>
            <u:Calendar id="calendar" select="onCalDateSelect" />  
            <Button press="onBtnPress" text="Select today" />
            <Text id="txtDateSelected" text="No Date selected"/>
          </VBox>
        </content>
    </Page>
</sap.ui.core.mvc:View>