SAPUI5 Planning Calendar OData V4

[former_member589162]

I would like to display the event item in PlanningCalendar with oData V4 but have some issue that I urgently need help.

The OData V4 has this metadata type for StartDate and EndDate as Edm.Date.

I got this error message when consuming the data:

This is the actual data:

And this is the XML view:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="ARN.ARN.controller.AppPOR" xmlns="sap.m" xmlns:unified="sap.ui.unified"
    xmlns:l="sap.ui.layout">
    <Page showHeader="true" title="{i18n>ApplicationPlanofRecord}" showFooter="true" showNavButton="true" navButtonPress="doNavBack">
        <l:DynamicSideContent id="DynamicSideContent" class="sapUiDSCExplored sapUiContentPadding" sideContentVisibility="AlwaysShow"
            showSideContent="{path: 'stateModel>/legendShown'}" containerQuery="true" breakpointChanged="updateToggleButtonState">
            <l:mainContent>
                <VBox>
                    <PlanningCalendar id="por" startDate="{/startDate}"
                        rows="{model: 'zearnModel', path: '/zearn_por_applications', 
                                               parameters : {$expand : 'EventItem'},
                                               sorter: [{ path: 'APPLICATION_ID', descending: false}], 
                                               events: {dataReceived : '.onDataEvents' }, templateShareable:true}"
                        legend="PlanningCalendarLegend" appointmentsVisualization="Filled" appointmentSelect="handleAppointmentSelect"
                        showEmptyIntervalHeaders="false" viewKey="M">
                        <toolbarContent>
                            <ToolbarSpacer/>
                            <ToggleButton pressed="{path: 'stateModel>/legendShown'}" icon="sap-icon://legend" tooltip="Legend"/>
                        </toolbarContent>
                        <views>
                            <PlanningCalendarView key="D" intervalType="Day" description="{i18n>WeekView}" intervalsS="1" intervalsM="3" intervalsL="7"
                                showSubIntervals="true"></PlanningCalendarView>
                            <PlanningCalendarView key="M" intervalType="Month" description="{i18n>MonthView}" intervalsS="1" intervalsM="1" intervalsL="1"
                                showSubIntervals="true"></PlanningCalendarView>
                            <PlanningCalendarView key="Y" intervalType="Month" description="{i18n>YearlyView}" intervalsS="60" intervalsM="60" intervalsL="60"
                                showSubIntervals="true"></PlanningCalendarView>
                            <PlanningCalendarView key="Q" intervalType="Month" description="{i18n>QuarterlyView}" intervalsS="4" intervalsM="4" intervalsL="4"
                                showSubIntervals="true"></PlanningCalendarView>
                        </views>
                        <rows>
                            <PlanningCalendarRow title="{zearnModel>PRODUCT_NAME_SHORT}"
                                appointments="{model: 'zearnModel', path : 'EventItem', templateShareable: 'true'}"
                                text="{zearnModel>PRODUCT_NAME_CAPTION}}" icon="" selected="false">
                                <appointments>
                                    <unified:CalendarAppointment title="{zearnModel>EVENT_DESC}" text="{zearnModel>EVENTTYPE_DESC}" icon="sap-icon://family-care"
                                        startDate="{path: 'zearnModel>STARTDATE', formatter: 'ARN.ARN.controller.Formatter.PORType1'}"
                                        endDate="{path: 'zearnModel>ENDDATE', formatter: 'ARN.ARN.controller.Formatter.PORType1'}"
                                        type="{path: 'zearnModel>EVENTTYPE_DESC', formatter: 'ARN.ARN.controller.Formatter.PORType'}" selected="false" tentative="false"/>
                                </appointments>
                            </PlanningCalendarRow>
                        </rows>
                    </PlanningCalendar>
                </VBox>
            </l:mainContent>
            <l:sideContent width="200px">
                <PlanningCalendarLegend id="PlanningCalendarLegend" appointmentItems="{path : '/legendAppointmentItems', templateShareable: 'true'}"
                    standardItems="Today">
                    <appointmentItems>
                        <unified:CalendarLegendItem text="{text}" type="{type}" tooltip="{text}"/>
                    </appointmentItems>
                </PlanningCalendarLegend>
            </l:sideContent>
        </l:DynamicSideContent>
        <headerContent>
            <OverflowToolbarButton text="{i18n>Plan}" type="Default" icon="sap-icon://filter" iconFirst="true" width="auto" enabled="true"
                visible="true" iconDensityAware="false" press="onSearchDialog" tooltip="{i18n>Filter}"/>
        </headerContent>
        <subHeader/>
        <customHeader/>
    </Page>
</mvc:View>

And formatter.js code:

PORType1: function (date) {
                console.log(date);
                var sdate = "";
                sdate = new Date();
                return new Date("2017", "2", "30", "10", "0"); //For testing purpose only.
            },

I would like to display the event item in UI5 PlanningCalendar with oData V4 but have some issue that I urgently need help.

The OData V4 has this metadata type for StartDate and EndDate as Edm.Date:

I got this error message when consuming the data:

This is the actual data in oData V4:

And this is the XML view:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="ARN.ARN.controller.AppPOR" xmlns="sap.m" xmlns:unified="sap.ui.unified"
xmlns:l="sap.ui.layout">
<Page showHeader="true" title="{i18n>ApplicationPlanofRecord}" showFooter="true" showNavButton="true" navButtonPress="doNavBack">
    <l:DynamicSideContent id="DynamicSideContent" sideContentVisibility="AlwaysShow"
        showSideContent="{path: 'stateModel>/legendShown'}" containerQuery="true" breakpointChanged="updateToggleButtonState">
        <l:mainContent>
            <VBox>
                <PlanningCalendar id="por" startDate="{/startDate}"
                    rows="{model: 'zearnModel', path: '/zearn_por_applications', 
                                           parameters : {$expand : 'EventItem'},
                                           sorter: [{ path: 'APPLICATION_ID', descending: false}], 
                                           events: {dataReceived : '.onDataEvents' }, templateShareable:true}"
                    legend="PlanningCalendarLegend" appointmentsVisualization="Filled" appointmentSelect="handleAppointmentSelect"
                    showEmptyIntervalHeaders="false" viewKey="M">
                    <toolbarContent>
                        <ToolbarSpacer/>
                        <ToggleButton pressed="{path: 'stateModel>/legendShown'}" icon="sap-icon://legend" tooltip="Legend"/>
                    </toolbarContent>
                    <views>
                        <PlanningCalendarView key="D" intervalType="Day" description="{i18n>WeekView}" intervalsS="1" intervalsM="3" intervalsL="7"
                            showSubIntervals="true"></PlanningCalendarView>
                        <PlanningCalendarView key="M" intervalType="Month" description="{i18n>MonthView}" intervalsS="1" intervalsM="1" intervalsL="1"
                            showSubIntervals="true"></PlanningCalendarView>
                        <PlanningCalendarView key="Y" intervalType="Month" description="{i18n>YearlyView}" intervalsS="60" intervalsM="60" intervalsL="60"
                            showSubIntervals="true"></PlanningCalendarView>
                        <PlanningCalendarView key="Q" intervalType="Month" description="{i18n>QuarterlyView}" intervalsS="4" intervalsM="4" intervalsL="4"
                            showSubIntervals="true"></PlanningCalendarView>
                    </views>
                    <rows>
                        <PlanningCalendarRow title="{zearnModel>PRODUCT_NAME_SHORT}"
                            appointments="{model: 'zearnModel', path : 'EventItem', templateShareable: 'true'}"
                            text="{zearnModel>PRODUCT_NAME_CAPTION}}" icon="" selected="false">
                            <appointments>
                                <unified:CalendarAppointment title="{zearnModel>EVENT_DESC}" text="{zearnModel>EVENTTYPE_DESC}" icon="sap-icon://family-care"
                                    startDate="{path: 'zearnModel>STARTDATE', type: 'sap.ui.model.odata.type.Date', formatter: '.formatter.date'}"
                                    endDate="{path: 'zearnModel>ENDDATE', type: 'sap.ui.model.odata.type.Date', formatter: '.formatter.date'}"
                                    type="{path: 'zearnModel>EVENTTYPE_DESC', formatter: '.formatter.PORType'}" selected="false" tentative="false"/>
                            </appointments>
                        </PlanningCalendarRow>
                    </rows>
                </PlanningCalendar>
            </VBox>
        </l:mainContent>
        <l:sideContent width="200px">
            <PlanningCalendarLegend id="PlanningCalendarLegend" appointmentItems="{path : '/legendAppointmentItems', templateShareable: 'true'}"
                standardItems="Today">
                <appointmentItems>
                    <unified:CalendarLegendItem text="{text}" type="{type}" tooltip="{text}"/>
                </appointmentItems>
            </PlanningCalendarLegend>
        </l:sideContent>
    </l:DynamicSideContent>
    <headerContent>
        <OverflowToolbarButton text="{i18n>Plan}" type="Default" icon="sap-icon://filter" iconFirst="true" width="auto" enabled="true"
            visible="true" iconDensityAware="false" press="onSearchDialog" tooltip="{i18n>Filter}"/>
    </headerContent>
    <subHeader/>
    <customHeader/>
</Page>

And formatter.js code:

    sap.ui.define([
    ], function () {
        "use strict";

        return {

            PORType: function (type) {
                return type; //for testing only.
            },

            date: function(date) {
                console.log("XXXXXXXXXXXX");
                console.log(date);
                return new Date(date); //for testing only
            }           
        };
    }
);

I also feel that the formatter function is not being called, the UI5 is just throwing the error "cannot read property getTime" without being formatted first. Is this a bug ?

How do I consume correctly in Planning Calendar UI5 with oData v4 ?

[former_member66]

Hi Don,

any updates on this? I think I've got the same issue in my application. How where you able to solve this?

Cheers, Lena

[michaelschmid03]

I just encountered this exact problem and my startDate and endDate were bound correct.

Apperently this is due to the Format of the Date
Ui5 Requires the Date to look like this[1]

Edm.DateTimeOffset"DateTimeOffset" : "2015-01-06T07:25:21Z"

Now when developing a CAP Service I see two ways to return a Date

Now lets look how both of these ways is displayed in a OData V4 Service:

Notice the Difference? → Exactly its .000Z instead of .00Z
For Now, I fixed the Problem with this Change in my CAP Service:
.toISOString().replace("0Z","Z")
Now it should be working as expected:

If you dont use CAP but another OData Service, see if you adjust the Backend just like shown

Sadly, UI5 can't handle this tiny difference for now, and I am Hoping SAP fixes this. Because this seems like a bug to me.

[1] https://ui5.sap.com/#/topic/6c9e61dc157a40c19460660ece8368bc

[rgadirov]

Hi fd18

this error usually occurs, if somewhere start date and end date time is missing, e.g. projects maintained but no start and end date time provided, even if it is only for one single line, this error might happen.

BR
Rufat