cancel
Showing results for 
Search instead for 
Did you mean: 

Calendar control modification

former_member9607
Active Participant
0 Kudos

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.

Regards,

KK

Accepted Solutions (0)

Answers (2)

Answers (2)

Former Member
0 Kudos

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

former_member9607
Active Participant
0 Kudos

Got the solution .

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

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');

  }

  };

out put.

Former Member
0 Kudos

Hey all,

do you by any chance know how can I do the next thing:

     when I click the arrow to display next month, e.g. alert or log in the console...

I don't know which event is it?

Thank you!

Former Member
0 Kudos

Hi,

We can make use of event 'changeCurrentDate' for that purpose.

0 Kudos

when I click the arrow to display next month, which function should I use , I need to trigger service while clicking on navigation button.