cancel
Showing results for 
Search instead for 
Did you mean: 

Why sap.ui.unified.Calendar displays the months view by default?

jaxu
Discoverer
0 Kudos

Hi, I'm using "sap.ui.unified.Calendar" control to show a calendar on the webpage, the code is simple like below:

var oCalendar = new sap.ui.unified.Calendar();

However, the calendar is always displaying the months view by default like this:

How to configue it to display the normal dates view like this?

Accepted Solutions (0)

Answers (1)

Answers (1)

yogananda
Product and Topic Expert
Product and Topic Expert
0 Kudos
jaxu

check this few sample... I am able to see calendar dates.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Just a Button</title>

<script src="https://ui5.sap.com//resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.unified"
data-sap-ui-compatVersion="edge"></script>

<script>
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Cozy mode, default behavior" }),
new sap.ui.unified.Calendar({ months: 2 })
] }).placeAt('contentCozy').addStyleClass("sapUiMediumMarginBottom");
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Cozy mode, Calendar width < 600px" }),
new sap.ui.unified.Calendar({ months: 2, width: "599px" })
] }).placeAt('contentCozy').addStyleClass("sapUiMediumMarginBottom");
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Cozy mode, Calendar width >= 600px" }),
new sap.ui.unified.Calendar({ months: 2, width: "600px" })
] }).placeAt('contentCozy').addStyleClass("sapUiMediumMarginBottom");
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Compact mode, default behavior" }),
new sap.ui.unified.Calendar({ months: 2 })
] }).placeAt('contentCompact').addStyleClass("sapUiMediumMarginBottom");
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Compact mode, Calendar width < 600px" }),
new sap.ui.unified.Calendar({ months: 2, width: "599px" })
] }).placeAt('contentCompact').addStyleClass("sapUiMediumMarginBottom");
new sap.m.VBox({ items: [
new sap.m.Title({ text: "Compact mode, Calendar width >= 600px" }),
new sap.ui.unified.Calendar({ months: 2, width: "600px" })
] }).placeAt('contentCompact').addStyleClass("sapUiMediumMarginBottom");
</script>

</head>
<body id="content" class="sapUiBody">
<div id="contentCozy" class="sapUiSizeCozy"></div>
<div id="contentCompact" class="sapUiSizeCompact"></div>
</body>
</html>
jaxu
Discoverer

Thanks for your help yoganandamuthaiah the sample is looking good.

I fixed this problem by myself, it caused by the other possible problem in my application.