Skip to Content
Author's profile photo Krishnakant Joshi

Calendar control modification

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



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" ],, true);

2. meaning of colors using CALENDAR LEGEND.


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.

I searched for the CssClass of that control area which actually contains the Dates as shown below.

(press F12 on browser window or right click and click on “Inspect Element” )



calendar = new{
  monthsPerRow : 1,
  currentDate : "2013/04/30",
calendar.onAfterRendering = function(oEvent) {
  var divs = $('.sapMeCalendarMonthDays').children();
  var i;
  var length = divs.length;
  var classes;
  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

out put.


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)

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Parth Jhalani
      Parth Jhalani

      Grt blog. Thanks!

      Could you also share, how you defined the binding for In and Out times?



      Author's profile photo Former Member
      Former Member

      Hi Sir,

      i used in that me apply a color to a particular date ,but how to decrease that color like legend.Please reply for this sir.