0

I am trying to modify a time table which I am getting from an api call. I am able to modify everything in css except for the prev and next button. I do not know Jquery that is why I am struggling to understand. It will be helpful if someone can give me some direction or example -

Currently I have modified it to look like this although I am unable to modify the button because I am not sure where this generating and how to put a new icon between those two button div as well -

enter image description here

I am trying to achieve this -

enter image description here

The following js are used to call the api and making it a weekly view for next 12 weeks. - 

drupal_add_js(
'https://api3.libcal.com/js/hours_grid.js?002',
array(
  'type' => 'external',
  'scope' => 'footer',
)
);
drupal_add_js(
'(function($) { 
  var week0 = new $.LibCalWeeklyGrid( $("#s-lc-whw0"), { iid: 1131, lid: 0,  weeks: 12 }); 
  })(jQuery);',
array(
  'type' => 'inline',
  'scope' => 'footer',
)
);

Please let me know If any other info needed.

Karlo Kokkak
  • 3,674
  • 4
  • 18
  • 33
Vinco
  • 3
  • 2
  • https://stackoverflow.com/questions/17922901/change-elements-after-property-in-jquery – Fky May 22 '18 at 09:38

1 Answers1

0

It looks like you should be able to style the arrows with the CSS classnames on the buttons:

.s-lc-vhw-pr {
  /* styles for previous button */
}

.s-lc-vhw-ne {
  /* styles for next button */
}

As far as putting the icon in between the two buttons, you could try using a CSS pseudo element ::after after the first button to get it to show up there if it's only a visual element.

.s-lc-vhw-pr::after {
  /* can create a placeholder element which would have the calendar icon as a background image */

}

Here's a rough example: https://jsfiddle.net/g9r5g8x0/

Tim Gupta
  • 94
  • 3
  • Hi, there is one problem with ::after and that is when I hover on .s-lc-vhw-pr, it also highlights the image. Is there any way I can stop that. Another thing is even though I can style the icon of .s-lc-vhw-pr and .s-lc-vhw-ne but how can I change it from >> to >. – Vinco May 20 '18 at 12:05
  • https://stackoverflow.com/questions/17922901/change-elements-after-property-in-jquery – Fky May 22 '18 at 09:37