Adding a SimplePlanningCalendar to a UI5 app fails with `getKey` error

Question

When I add a SimplePlanningCalendar to my app, I got the following Error.

I added the calendar with a minimal configuration to my app.

<IconTabBar xmlns="sap.m"
    id="idCategoryMenu"
    selectedKey="Home"
    headerMode="Inline"
    stretchContentHeight="true"
    applyContentPadding="false"
    select=".onSelectCategory"
    items="{
        path: 'backend>/CategorySet',
        parameters: {
            expand: 'Reports'
        },
        sorter: {
            path: 'Sort'
        },
        templateShareable: true
    }">
    <items>
        <IconTabFilter id="myIconTabFilter" key="{backend>Uuid}" text="{backend>Name}">
            <!-- ... -->
                <SinglePlanningCalendar>
                    <appointments>
                        <unified:CalendarAppointment xmlns:unified="sap.ui.unified"
                            title="{title}"
                            startDate="{startDate}"
                            endDate="{endDate}"
                        />
                    </appointments>
                </SinglePlanningCalendar>
            <!-- ... -->
        </IconTabFilter>
    </items>
</IconTabBar>

When I debug the app, I come to the following line inside the SinglePlanningCalendar.js where a key from the given vView parameter is requested, but the parameter only holds a string.

Anyone else had this problem before and knows why or how to solve this?

Answer 1

The problem is caused by the control implementation itself in the current version (1.71.21) I use for my development.

The fix in the commit 45696fe is available as of UI5 1.75.x.

Since I cannot change my version, I implemented the given solution in my package:

{ // Controller
    onInit: function () {
      // ...
      this.calendarTemporaryFix(); // Not needed since UI5 1.75
    },

    calendarTemporaryFix: function () {
        // SinglePlanningCalendar required from "sap/m/SinglePlanningCalendar"
        const fnSetSelectedView = SinglePlanningCalendar.prototype.setSelectedView;
        SinglePlanningCalendar.prototype.setSelectedView = function (vView) {
            if (typeof vView === "string") {
                vView = sap.ui.getCore().byId(vView);
            }
            return fnSetSelectedView.call(this, vView);
        };
    },
    // ...
}