Employee leave calender in sapui5

Employee leave calendar in sapui5

View.xml

<core:View xmlns:core="sap.ui.core"
xmlns:grid="sap.ui.layout.cssgrid" xmlns:unified="sap.ui.unified"
xmlns="sap.m" controllerName="NavApp.view.Main" displayBlock="true"
height="100%">
<App id="AppId">

<Page title="Mahindra Vehicle  Manufactures"
class="sapUiSizeCompact" showHeader="false">
<content>

<HBox>
<core:Icon src="sap-icon://home" class="size1"
color="#031E48" />
<Text text="DASHBOARD" class="size1" />
</HBox>


<VBox class="sapUiSmallMargin">
<IconTabBar id="idTopLevelIconTabBar"
class="sapUiResponsiveContentPadding" select="onSelect"
backgroundDesign="Translucent" expandable="false" expanded="false"
headerBackgroundDesign="Translucent">
<items>
<IconTabFilter id="start" text="vacation"
key="vacation" class="tab1">
</IconTabFilter>
<IconTabFilter id="layouts" text="SickLeave"
key="sick"></IconTabFilter>
<IconTabFilter id="Containers" text="Unpaid Leave"
key="unpaid"></IconTabFilter>
<IconTabFilter text="Half Day" key="half"></IconTabFilter>
<IconTabFilter text="Others" key="other">
</IconTabFilter>
</items>
</IconTabBar>

<PlanningCalendar id="PC1" stickyHeader="true"
startDate="{path: '/startDate'}" rows="{/people}"
appointmentsVisualization="Filled" viewKey="One Month"
showEmptyIntervalHeaders="false">
<rows>
<PlanningCalendarRow icon="{pic}"
title="{name}" text="{role}"
appointments="{path : 'appointments', templateShareable: 'false'}">
<appointments>
<unified:CalendarAppointment
startDate="{start}" endDate="{end}" title="{title}"
color="{color}" tooltip="{tooltip}">
</unified:CalendarAppointment>
</appointments>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</VBox>


</content>
</Page>
</App>

</core:View>



controller.js

var data;

sap.ui
.controller(
"NavApp.view.Main",
{

onInit : function() {
this.data = {
startDate : new Date("2019/10/01"),
people : [ {
name : "Richa Ghodake",
role : "57005032",
vacation : "22",
appointments : [ {
start : new Date("2019/10/16"),
end : new Date("2019/10/17"),
color : "red",
title : "sick",
}, {
start : new Date("2019/10/29"),
end : new Date("2019/11/09"),
title : "vacation",
color : "black",
tooltip : "Planned Leave"
} ]

}, {
name : "Kajal Navle",
role : "",
vacation : "22",
appointments : [ {
start : new Date("2019/10/18"),
end : new Date("2019/11/05"),
title : "other",
color : "cyan",
tooltip : "Planned Leave"
} ]

}, {

name : "Tushar Patil",
role : "",
vacation : "22",
appointments : [ {
start : new Date("2019/11/04"),
end : new Date("2019/11/05"),
title : "unpaid",
color : "yellow",
tooltip : "Unplanned Leave"
}

]

}, {

name : "Digvijay Pawar",
role : "",
vacation : "22",
appointments : [ {
start : new Date("2019/11/08"),
end : new Date("2019/11/09"),
title : "half",
color : "blue",
tooltip : "Sick Leave"
}

]

}, {
name : "Aasavari Puralkar",
role : "57000197",
vacation : "22",
appointments : [ {
start : new Date("2019/10/17"),
end : new Date("2019/10/19"),
title : "sick",
color : "red",
tooltip : "Sick Leave"
}, {
start : new Date("2019/11/26"),
end : new Date("2019/12/03"),
title : "vacation",
color : "black",
tooltip : "Planned Leave"
} ]

}, {
name : "Ganesh Rane",
role : "57005046",
vacation : "22",
appointments : [ {
start : new Date("2019/10/17"),
end : new Date("2019/10/26"),
title : "other",
color : "cyan",
tooltip : "Planned Leave"
} ]

}, {
name : "Rahul Singh",
role : "57005044",
vacation : "22",
appointments : [ {
start : new Date("2019/10/21"),
end : new Date("2019/10/26"),
title : "half",
color : "blue",
tooltip : "Planned Leave"
}, {
start : new Date("2019/10/29"),
end : new Date("2019/10/31"),
title : "vacation",
color : "black",
tooltip : "Planned Leave"
} ]

}, {
name : "Bhagyashri Jadhav",
role : "57005146",
vacation : "22",
appointments : [ {
start : new Date("2019/09/23"),
end : new Date("2019/09/24"),
title : "sick",
color : "red",
tooltip : "Sick Leave"
}, {
start : new Date("2019/10/22"),
end : new Date("2019/11/09"),
title : "other",
color : "cyan",
tooltip : "Planned Leave"
} ]

}, {
name : "Suryateja Dharma",
role : "57005146",
vacation : "22",
appointments : [ {
start : new Date("2019/10/29"),
end : new Date("2019/10/31"),
title : "other",
color : "cyan",
tooltip : "Planned Leave"
}, {
start : new Date("2019/10/31"),
end : new Date("2019/11/02"),
title : "unpaid",
color : "yellow",
tooltip : "Unplanned Leave"
} ]

}, {

name : "Pooja Vijan",
role : "57005001",
vacation : "22",
appointments : [ {
start : new Date("2019/10/24"),
end : new Date("2019/10/31"),
title : "vacation",
color : "black",
tooltip : "Planned Leave"

} ]

}, {

name : "Viraj Pansare",
role : "",
vacation : "22",
appointments : [ {
start : new Date("2019/10/29"),
end : new Date("2019/10/30"),
title : "unpaid",
color : "yellow",
tooltip : "Unplanned Leave"

} ]

}, {

name : "Tushar Patil",
role : "",
appointments : [ {
start : new Date("2019/10/29"),
end : new Date("2019/10/31"),
title : "other",
color : "cyan",
tooltip : "Unplanned Leave"

}, {

start : new Date("2019/11/12"),
end : new Date("2019/11/13"),
title : "sick",
color : "red",
tooltip : "Sick Leave"

} ]

}, {

name : "Urvashi Bhadarka",
role : "",
vacation : "22",
appointments : [ {
start : new Date("2019/10/29"),
end : new Date("2019/10/31"),
title : "unpaid",
color : "yellow",
tooltip : "Unplanned Leave"

} ]

}, {
name : "Suraj Bhalerao",
role : "57005123",
vacation : "22",
appointments : [ {
start : new Date("2019/10/18"),
end : new Date("2019/10/19"),
title : "vacation",
color : "black",
tooltip : "Sick Leave"
}, {
start : new Date("2019/10/29"),
end : new Date("2019/10/30"),
title : "sick",
color : "red",
tooltip : "Unplanned Leave"
} ]

}

]
};

this.oModel = new sap.ui.model.json.JSONModel();
this.oModel.setData(this.data);
this.getView().setModel(this.oModel);
this.getView().byId("PC1").setVisible(false);

},

onSelect : function(oEvent) {
this.getView().byId("PC1").setVisible(true);

var sickdata = {
startDate : new Date("2019/10/01"),
people : []
}

this.oModel = new sap.ui.model.json.JSONModel();
this.getView().getModel().refresh();

var x = oEvent.mParameters.key
console.log(x);

debugger;

for (var i = 0; i < this.data.people.length; i++) {
for (j = 0; j < this.data.people[i].appointments.length; j++) {
if (this.data.people[i].appointments[j].title == x) {
sickdata.people
.push({
name : this.data.people[i].name,
role : this.data.people[i].role,
vacation : this.data.people[i].vacation,

appointments : [ {
start : this.data.people[i].appointments[j].start,
end : this.data.people[i].appointments[j].end,
// title :
// this.data.people[i].appointments[j].title,
color : this.data.people[i].appointments[j].color,
tooltip : this.data.people[i].appointments[j].tooltip
} ]

})
}
}
}

debugger;

this.oModel.setData(sickdata);
this.getView().setModel(this.oModel);
this.oModel.refresh();

},

handleAppointmentSelect : function(oEvent) {
var oAppointment = oEvent.getParameter("appointment");
if (oAppointment) {
alert(oAppointment.getText());
} else {
var aAppointments = oEvent
.getParameter("appointments");
var sValue = aAppointments.length
+ " Appointments selected";
alert(sValue);
}

},


});


OUUPUT :


Post a Comment

Previous Post Next Post