Uncaught Error: Date must be a JavaScript date object; Element sap.m.PlanningCalendar#PC1

[former_member505084]

var date = new Date("2017", "9", "15", "8", "0"); var oModel = new sap.ui.model.json.JSONModel(); var data = 0;

$.ajax({

url:"/altcal/hana/wfs/services/getRosterInJSON.xsjs",

async:false,

type:'Get',

dataType:'json',

success: function(response) {

data = response;

oModel.setData(data);

console.log("view_Shift",data);

sap.ui.getCore().byId("PC1").setStartDate(new Date(data.startDate));

var len = data.people.length; for(i=0;i<len;i++) { sap.ui.getCore().byId("PC2").setIcon(data.people[i].pic); sap.ui.getCore().byId("PC2").setTitle(data.people[i].name);

var length =data.people[i].appointments.length;

for (j=0; i<length;i++) {

sap.ui.getCore().byId("PC3").setStartDate(new Date(data.people[i].appointments[j].start)); sap.ui.getCore().byId("PC3").setEndDate(new Date(data.people[i].appointments[j].end)); sap.ui.getCore().byId("PC3").setIcon(data.people[i].appointments[j].pic);

var dateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern : "yyyy-MM-dd" });

var start_date = data.people[i].appointments[j].start;

var startdate1 = new Date(start_date);

var startdate = dateFormat.format(startdate1);

var end_date = data.people[i].appointments[j].end;

var enddate1 = new Date(end_date);

var enddate = dateFormat.format(enddate1);

sap.ui.getCore().byId("PC3").setTitle(data.people[i].appointments[j].title); sap.ui.getCore().byId("PC3").setText(data.people[i].appointments[j].info); sap.ui.getCore().byId("PC3").setType(data.people[i].appointments[j].type); sap.ui.getCore().byId("PC3").setTentative(data.people[i].appointments[j].tentative); } } }

});

this.getView().setModel(oModel)

JSON is :

{ "startDate": "2017-08-01T00:00:00.000Z", "people": [{ "pic": "sap-icon://employee", "name": "James Smith", "appointments": [{ "start": "2017-08-01T22:30:00.000Z", "end": "2017-08-01T07:30:00.000Z", "title": "C1", "info": "NIGHT", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-02T22:30:00.000Z", "end": "2017-08-02T07:30:00.000Z", "title": "C1", "info": "NIGHT", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-03T22:30:00.000Z", "end": "2017-08-03T07:30:00.000Z", "title": "C1", "info": "NIGHT", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-04T22:30:00.000Z", "end": "2017-08-04T07:30:00.000Z", "title": "C1", "info": "NIGHT", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-05T07:00:00.000Z", "end": "2017-08-05T16:00:00.000Z", "title": "A1", "info": "MORNING", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-06T00:00:00.000Z", "end": "2017-08-06T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-07T00:00:00.000Z", "end": "2017-08-07T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-08T07:00:00.000Z", "end": "2017-08-08T16:00:00.000Z", "title": "A1", "info": "MORNING", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-09T07:00:00.000Z", "end": "2017-08-09T16:00:00.000Z", "title": "A1", "info": "MORNING", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-10T07:00:00.000Z", "end": "2017-08-10T16:00:00.000Z", "title": "A1", "info": "MORNING", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-11T07:00:00.000Z", "end": "2017-08-11T16:00:00.000Z", "title": "A1", "info": "MORNING", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-12T22:30:00.000Z", "end": "2017-08-12T07:30:00.000Z", "title": "C1", "info": "NIGHT", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-13T00:00:00.000Z", "end": "2017-08-13T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-14T00:00:00.000Z", "end": "2017-08-14T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }], "headers": [{ "start": "2017-08-01T22:30:00.000Z", "end": "2017-08-01T07:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-02T22:30:00.000Z", "end": "2017-08-02T07:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-03T22:30:00.000Z", "end": "2017-08-03T07:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-04T22:30:00.000Z", "end": "2017-08-04T07:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-05T07:00:00.000Z", "end": "2017-08-05T16:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-06T00:00:00.000Z", "end": "2017-08-06T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-07T00:00:00.000Z", "end": "2017-08-07T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-08T07:00:00.000Z", "end": "2017-08-08T16:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-09T07:00:00.000Z", "end": "2017-08-09T16:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-10T07:00:00.000Z", "end": "2017-08-10T16:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-11T07:00:00.000Z", "end": "2017-08-11T16:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-12T22:30:00.000Z", "end": "2017-08-12T07:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-13T00:00:00.000Z", "end": "2017-08-13T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-14T00:00:00.000Z", "end": "2017-08-14T00:00:00.000Z", "title": "Private", "type": "Type05" }] }, { "pic": "sap-icon://employee", "name": "Joanne Rush", "appointments": [{ "start": "2017-08-01T13:30:00.000Z", "end": "2017-08-01T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-02T13:30:00.000Z", "end": "2017-08-02T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-03T13:30:00.000Z", "end": "2017-08-03T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-04T13:30:00.000Z", "end": "2017-08-04T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-05T13:30:00.000Z", "end": "2017-08-05T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-06T00:00:00.000Z", "end": "2017-08-06T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-07T00:00:00.000Z", "end": "2017-08-07T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-08T13:30:00.000Z", "end": "2017-08-08T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-09T13:30:00.000Z", "end": "2017-08-09T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-10T13:30:00.000Z", "end": "2017-08-10T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-11T13:30:00.000Z", "end": "2017-08-11T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-12T13:30:00.000Z", "end": "2017-08-12T22:30:00.000Z", "title": "B2", "info": "AFTERNOON", "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-13T00:00:00.000Z", "end": "2017-08-13T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }, { "start": "2017-08-14T00:00:00.000Z", "end": "2017-08-14T00:00:00.000Z", "title": "WO", "info": null, "type": "Type01", "pic": "sap-icon://sap-ui5", "tentative": false }], "headers": [{ "start": "2017-08-01T13:30:00.000Z", "end": "2017-08-01T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-02T13:30:00.000Z", "end": "2017-08-02T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-03T13:30:00.000Z", "end": "2017-08-03T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-04T13:30:00.000Z", "end": "2017-08-04T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-05T13:30:00.000Z", "end": "2017-08-05T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-06T00:00:00.000Z", "end": "2017-08-06T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-07T00:00:00.000Z", "end": "2017-08-07T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-08T13:30:00.000Z", "end": "2017-08-08T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-09T13:30:00.000Z", "end": "2017-08-09T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-10T13:30:00.000Z", "end": "2017-08-10T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-11T13:30:00.000Z", "end": "2017-08-11T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-12T13:30:00.000Z", "end": "2017-08-12T22:30:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-13T00:00:00.000Z", "end": "2017-08-13T00:00:00.000Z", "title": "Private", "type": "Type05" }, { "start": "2017-08-14T00:00:00.000Z", "end": "2017-08-14T00:00:00.000Z", "title": "Private", "type": "Type05" }] }] }

OUTPUT:

Uncaught Error: Date must be a JavaScript date object; Element sap.m.PlanningCalendar#PC1 at f.e.setStartDate (PlanningCalendar.js?eval:6) at f.j.updateProperty (ManagedObject-dbg.js:3005) at f.w (ManagedObject-dbg.js:2853) at f.a.fireEvent (EventProvider-dbg.js:229) at f.B._fireChange (Binding-dbg.js:247) at f.J.checkUpdate (JSONPropertyBinding.js?eval:6) at f.B.initialize (Binding-dbg.js:373) at f.j._bindProperty (ManagedObject-dbg.js:2954) at f.j.updateBindings (ManagedObject-dbg.js:3618) at f.j._propagateProperties (ManagedObject-dbg.js:4030)

[former_member505084 · Accepted solution]

Finally I got the solution:

I tried this one and it is working properly.

VIEW : -

<PlanningCalendar

id="PC1"

singleSelection="false"

showIntervalHeaders="false"

startDate="{path: '/startDate'}"

rows="{path: '/people'}"

appointmentsVisualization="Filled"

appointmentSelect="handleAppointmentSelect"

intervalSelect="handleIntervalSelect">

<rows>

<PlanningCalendarRow

id ="PC2"

icon="{pic}"

title="{name}"

text="{role} ({level}) "

key = "{empid}"

appointments="{path : 'appointments', templateShareable: 'true'}">

<appointments>

<unified:CalendarAppointment

startDate="{start}"

endDate="{end}"

icon="{pic}"

title="{title}"

text="{info}"

type="{type}"

color = "{color}"

tentative="{tentative}">

</unified:CalendarAppointment>

</appointments>

<intervalHeaders>

<unified:CalendarAppointment

startDate="{start}"

endDate="{end}"

icon="{pic}"

title="{title}"

type="{type}">

</unified:CalendarAppointment>

</intervalHeaders>

</PlanningCalendarRow>

</rows>

</PlanningCalendar>

CONTROLLER : -

onInit: function () {

var data = 0;

var oModel = new sap.ui.model.json.JSONModel();

$.ajax({

url:"/altcal/hana/wfs/services/getRosterInJSON.xsjs",

async:false,

type:'Get',

dataType:'json',

success: function(response) {

data = response;

var data1 = {};

var yr = new Date(data.startDate).getFullYear();

var mnt = new Date(data.startDate).getMonth();

var day = new Date(data.startDate).getDate();

data1["startDate"] = new Date(yr,mnt,day);

data1["people"] = data["people"];

for(var pIndex in data["people"]) {

for (var aIndex in data["people"][pIndex]["appointments"] ) {

data1["people"][pIndex]["appointments"][aIndex]["start"]= new Date(data1["people"][pIndex]["appointments"][aIndex]["start"]);

data1["people"][pIndex]["appointments"][aIndex]["end"]= new Date(data1["people"][pIndex]["appointments"][aIndex]["end"]);

console.log() ;

data1["people"][pIndex]["headers"][aIndex]["start"]= new Date(data1["people"][pIndex]["headers"][aIndex]["start"]);

data1["people"][pIndex]["headers"][aIndex]["end"]= new Date(data1["people"][pIndex]["headers"][aIndex]["end"]);

}

}

oModel.setData(data1); console.log("view_Shift",data1); } }); this.getView().setModel(oModel);

},

[Sharathmg]

As I see, are you trying to read the date from JSON and map it into a model. When you bind the model to control, you get the error. Is the interpretation correct?

Note: Kindly explain the issue in detail and post relevant portion of code. It increases your chances of getting response.

[former_member505084]

hello Sharath,

Yes your interpretation is correct.

While I am running Planning calendar it is showing error like this,

"Uncaught Error: Date must be a JavaScript date object; Element sap.m.PlanningCalendar"

I was getting dates like {"start": "2017-08-14T00:00:00.000Z", "end": "2017-08-14T00:00:00.000Z"}

Planning calendar was not taking the date format what i was getting from backend.

Thanks

[mantrishekar]

Hi Preeti,

Change the JSON Object as below

"start": new Date("2017-08-13T00:00:00.000Z"), "end":new Date( "2017-08-13T00:00:00.000Z"), "title": "Private", "type": "Type05" },

This would work

Regards,

Shekar.

[former_member505084]

Hello Mantri Shekar,

I tried this one also, but not worked.

Thanks

Preeti