Quantcast
Channel: SCN : All Content - All Communities
Viewing all articles
Browse latest Browse all 8338

Calendar control modification

$
0
0

Recently I had a requirement to modify a calendar control which looks like below.

 

 

test.PNG

 

 

Requirement:

 

Requirement was to create a home page for employee attendance regularization application which shows a calendar.

calendar control should display employee's attendance data( In/out time) for selected month.

 

Achievable tasks:

 

1. background color using

 

calendar.toggleDatesType([ "2013/04/12" ], sap.me.CalendarEventType.Type07, true);

2. meaning of colors using CALENDAR LEGEND.

 

sddsd.JPG

 

Challenge :

 

1. Custom labels below the dates

 

 

Calendar control ( sap.m.Calendar ) does not have such property (as per my knowledge) to set the labels on / after dates.

 

Using extend() method we can extend existing control and give some new properties and aggregation and all.

 

As per the link extend TreeNode in SAPUI5 the function renderInnerAttribures is a specific hook of the TextFieldRenderer. As it is not supported for Tree, I found that it is also not supported for calendar.

 

So as shown in above link i also used the  onAfterrRendering() method of sap.ui.core.Control and customized my Calendar as below.

 

 

code:

 

calendar = new sap.me.Calendar({  dayHeight:80,  monthsPerRow : 1,  currentDate : "2013/04/30",  });
calendar.onAfterRendering = function(oEvent) {  var divs = $('.sapMeCalendarMonthDays').children();  var i;  var length = divs.length;  var classes;  for(i=0;i<length;i++)  {  classes = $(divs[i]).attr('class');  $(divs[i]).append('<br/><span style="width:100%;display:block;font-size:0.5em;font-weight:bold; color:green">In:10:30</span><span style="width:100%;display:block;font-size:0.5em;font-weight:bold; color:green">Out:06:30</span>');
//check the condition
if(i==3)  $(divs[i]).addClass('sapMeCalendarType04');
if(i==11)  $(divs[i]).addClass('sapMeCalendarType07');  }  };

out put.


asdadadas.JPG

 

This document was generated from the following discussion: Calendar control modification

 

Please provide your inputs if i am wrong somewhere or missing something

 

Happy Learning

 

Below are few links for reference.

 

Documentation/AdvancedTopics/OnTheFlyControlDefinition – SAPUI5 Wiki (TIP CORE User Interface)

 

Documentation/AdvancedTopics/OnTheFlyControlExample – SAPUI5 Wiki (TIP CORE User Interface)

 

Documentation/AdvancedTopics/CompositeControl – SAPUI5 Wiki (TIP CORE User Interface)


Viewing all articles
Browse latest Browse all 8338

Trending Articles