Putting an icon on FullCalendar's header

Question

I put a CustomButton on FullCalendar's header but i need to put an font-awesome icon.

           customButtons: {
                btnBloquearAgenda: {
                    icon: 'fa fa-lock',
                    click: function() {
                        alert('clicked the custom button!');
                    }
                }
            },

            header: {
                left: 'prev,next',
                center: 'title',
                right: 'btnBloquearAgenda agendaDay,agendaWeek,month'
            },

The button is showing "Undefined".

Just for your information: `fa fa-lock` stands for font-awesome, not bootstrap twitter. This is a class based system. Check this thread for the information you seek: http://stackoverflow.com/questions/33285716/add-font-awesome-icon-to-full-calendar-title/33288946#33288946 — Dorvalla, Jan 05 '16 at 18:02

score 5 · Answer 1 · answered Oct 05 '17 at 14:42

The icon value is appended to 'fc-icon-' and added as a class to the button's span element, i.e.

            btnBloquearAgenda: {
                icon: 'fa fa-lock',
                click: function() {
                    alert('clicked the custom button!');
                }
            }

Would result in

<button type="button" class="fc-btnBloquearAgenda-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-fa fa-lock"></span>
</button>

My work around was to just add an extra "fa" to the icon value

       customButtons: {
            btnBloquearAgenda: {
                icon: 'fa fa fa-lock',
                click: function() {
                    alert('clicked the custom button!');
                }
            }
        },

        header: {
            left: 'prev,next',
            center: 'title',
            right: 'btnBloquearAgenda agendaDay,agendaWeek,month'
        },

Result:

<button type="button" class="fc-btnBloquearAgenda-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-fa fa fa-lock"></span>
</button>

It doesn't work for me because fc-icon class uses the following rule : font-family: "fcicons" !important; So you have to override this with .fc-icon.fc-icon-fa { font-family: "FontAwesome" !important; } — wewereweb, Apr 20 '20 at 10:09
1. $("button.fc-btnBloquearAgenda-button span").removeClass(); 2. $("button.fc-btnBloquearAgenda-button span").html(''); --- I have fixed this issue using these lines fo code. — Thirumal Sakthivel, Jul 10 '20 at 10:14

score 0 · Answer 2 · answered Dec 01 '16 at 02:25

to put the icon on FullCalendar's header without changing the code, try it with css,

put this one in diplay:

 viewDisplay   : function(view) {
     $(".fc-button-month").find(".fc-button-content").addClass("icocon");
 },

CSS

.icocon:before{
  font-family: "FontAwesome";  
  content: "\f133\00a0";
  color: #fff;
}

score 0 · Answer 3 · answered Dec 10 '16 at 17:12

0

Simple, just use some jquery to replace the buttontext.

$(".fc-today-button").html('<i class="fa fa-calendar"></i>');

answered Dec 10 '16 at 17:12

Sitsol

9
1

score 0 · Answer 4 · answered Feb 01 '22 at 11:57

I used @user3776999's answer it worked in version 5. But when calendar rerendered, icons duplicated one by one. To fix duplication add this script tag before your js.

<script>
   window.FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

https://github.com/fullcalendar/fullcalendar/issues/5544

score 0 · Answer 5 · answered Apr 14 '23 at 10:22

To use fontawesome icons just add to your css next code:

.fc-icon.fc-icon-fa { 
    font-family: "FontAwesome" !important; 
}

In button configuration use:

customButtons: {
                printButton: {
                  text: '',
                  icon: 'fa fa fa-print',
                  click: function() {
                    window.print();
                  }
                }
            },

Putting an icon on FullCalendar's header

5 Answers5