$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: true, vro: true, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content

Calendar control modification

Hello experts,

We are creating a custom fiori application in which we need to modify the calendar control.

our requirement is as shown below;

What we have achieved is :

1. background color using

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

2. meaning of colors using CALENDAR LEGEND.

What we need now :

1. Custom labels below date

2. On click of date open an Action sheet to select few actions. for e.g Regularize the attendance

I have also found that using extend() method we can extend existing controls.

I have also gone through the below links

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)

Still struggling to extend a calendar control. please help.



test.PNG (22.1 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Mar 29, 2014 at 11:38 AM

    Got the solution . 😊

    I have used onAfterrRendering() method of sap.ui.core.Control.


    calendar = new sap.me.Calendar({
      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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 16, 2016 at 08:06 AM

    Good Day Krishnakant

    I cant open any of the documents you listed below, i would like to have a calendar with color of specific day depending.

    I would appreciate your help 😊

    Thank you

    Add comment
    10|10000 characters needed characters exceeded