CAB Calendar Component sn-cab-meeting-calendar

Ariel Aharon
Giga Guru

‎10-26-2023 01:37 AM

Hi!

 

I need to configure the way meetings are positioned on the calendar from LTR to RTL.

 

ArielAharon_0-1698309182734.png

 

The 27th and 28th meetings are truly supposed to be at 23rd and 22nd, I do have the solution by CSS and JS but if the page width is changed the CSS is reset basically a responsiveness feature of the calendar component.

 

So I researched the widget and found out that there's a custom component named "sn-cab-meeting-calendar", and I did not find any where or way to configure it.

 

Any suggestions?

 

P.S.

My solution is that the green meeting blocks has a "left" css property, in order to have it aligned as RTL, the "left" css value should be the "right" css value.

0 Helpfuls
  • 598 Views
5 REPLIES 5

Peter Bodelier
Giga Sage

‎10-26-2023 03:55 AM

Hi @Ariel Aharon,

 

I think your solution will lie within https://instance.service-now.com/nav_to.do?uri=sp_css_include.do?sys_id=7c7f23bbd796220034d145bcce61...

 


Help others to find a correct solution by marking the appropriate response as accepted solution and helpful.
0 Helpfuls

Ariel Aharon
Giga Guru
In response to Peter Bodelier

‎10-26-2023 04:06 AM - edited ‎10-26-2023 04:07 AM

Thank you Peter for taking the time to reply!

 

I did walked through that CSS find but I do believe my answer relies within a JS file and I'll explain.

When I investigated that element's behavior I did come to find out that the position style properties are set within a "style" attribute on the element it self meaning that is not dependent on class.

Also, the responsivity of the element (position it self on large / med / small screen) is basically adjusting the properties on the "style" attribute set to the element causing the element to rerender (I believe that's the Angular behavior there).

 

 


var btn = document.querySelectorAll('div[role="button"]');

btn.forEach(function (ele) {

var leftValue = ele.style.left;

ele.style.left = "auto";

ele.style.right = leftValue;

});

 

 

 

 

Therefore I believe the responsivity lies on the JavaScript side rather than the CSS include because I did found a solution within the browser console:

and it worked just fine, but since the responsivity kicked in when I change the page's width, then the element re-rendered causing the style attribute to go back to what it is set behind the scenes.

0 Helpfuls

Peter Bodelier
Giga Sage
In response to Ariel Aharon

‎10-26-2023 04:40 AM

The solution may be easier 🙂

 

Change the HTML of the widget:

<div dir="rtl" class="panel panel-default">
  <div dir="rtl" class="panel-body">
   <sn-cab-meeting-calendar dir="rtl" timeformat='data.timeFormat'></sn-cab-meeting-calendar>
  </div>
</div>

 

dir="rtl" makes sure your meetings are positioned RTL


Help others to find a correct solution by marking the appropriate response as accepted solution and helpful.
0 Helpfuls

Ariel Aharon
Giga Guru
In response to Peter Bodelier

‎10-30-2023 07:15 AM

As I suspected it hadn't moved the green meeting blocks, it only changes the layout of the days (labels, day of the month, etc) the green box is basically positioned dynamically via a script some where. 

 

I'm clue less of how to find that "sn-cab-meeting-calendar" component. How'd I find that? I have looked it up in dependent scripts and haven't found a mention for that there.

0 Helpfuls