I'm trying to change a style of next, previous buttons of fullcalendar by using a glyphicon.

Here is my code:

$(document).ready(function() {
  $('#calendar').fullCalendar({
      buttonText : {
          prev : '<i class="glyphicon glyphicon-triangle-left"></i>',
          next : '<i class="glyphicon glyphicon-triangle-right"></i>'
      }
  });
});

It's not working. It's shown like this:

And here is a rendered html code,

I didn't know what was wrong. Thanks a lot for your help.

I'm trying to change a style of next, previous buttons of fullcalendar by using a glyphicon.

Here is my code:

$(document).ready(function() {
  $('#calendar').fullCalendar({
      buttonText : {
          prev : '<i class="glyphicon glyphicon-triangle-left"></i>',
          next : '<i class="glyphicon glyphicon-triangle-right"></i>'
      }
  });
});

It's not working. It's shown like this:

And here is a rendered html code,

I didn't know what was wrong. Thanks a lot for your help.

• javascript
• twitter-bootstrap
• fullcalendar

2 Answers 2

Maybe prev and next are only expected text. And even if there are html tags, they are considered as text. Did you tried to add these icon in javascript after the creation of the calendar?

Like:

...
$('#calendar').fullCalendar({
  buttonText : {
      prev : '<i class="glyphicon glyphicon-triangle-left"></i>',
      next : '<i class="glyphicon glyphicon-triangle-right"></i>'
  }
});
$(".fc-prev-button").append('<i class="glyphicon"...</i>')
...

That seems to set the text content of the button, while you want to use a custom css class to display a custom icon.

Have you tried using buttonsIcons instead?

$('#calendar').fullCalendar({
    buttonsIcons : {
       prev: 'left-single-arrow',
       next: 'right-single-arrow',
    }
});

I'm not pletely sure that you can use custom named css classes, some posts seem to hint to the fact that it could not be that easy.