Trying to change a jquery Prev and Next Button

Question

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 -

I am trying to achieve this -

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.

Answer 1

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/