$('#calendar').fullCalendar({
         header: {
                    left: /*'prev,next'*/'BackwardButton,ForwardButton',
                    center: 'title',
                    right: '',
                },             
                customButtons: {                    
                    ForwardButton: {
                        //text: 'Framåt',
                        click: function () {
                        
                        }
                    },
                    BackwardButton: {
                        //text: 'Bakåt',
                        click: function () {
                         
                            



                        }
                    }
                },
                                buttonsIcons: {
                    BackwardButton: 'left-single-arrow',
                    ForwardButton: 'right-single-arrow',
                },
      
      });

<link href=".9.0/fullcalendar.css" rel="stylesheet"/>

<script src=".1.1/jquery.min.js"></script>
<script src=".js/2.22.0/moment.min.js"></script>
<script src=".9.0/fullcalendar.js"></script>



<div id="calendar"></div>

      $('#calendar').fullCalendar({
         header: {
                    left: /*'prev,next'*/'BackwardButton,ForwardButton',
                    center: 'title',
                    right: '',
                },             
                customButtons: {                    
                    ForwardButton: {
                        //text: 'Framåt',
                        click: function () {
                        
                        }
                    },
                    BackwardButton: {
                        //text: 'Bakåt',
                        click: function () {
                         
                            



                        }
                    }
                },
                                buttonsIcons: {
                    BackwardButton: 'left-single-arrow',
                    ForwardButton: 'right-single-arrow',
                },
      
      });

<link href="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>



<div id="calendar"></div>

I am working with FullCalender.io. I have two custom buttons that I would like to add the default chevron or arrow to. I found these properties, but I can't figure out where in the full calendar initialization I should put it. Nothing have worked so far. I only get the text 'undefined'. Any ides anybody?

      jQuery('#calendar').fullCalendar({
            header: {
                left: 'BackwardButton,ForwardButton',
                center: 'title',
                right: '',
            },             
            customButtons: {                    
                ForwardButton: {
                    //text: 'Framåt',
                    click: function () {

                    }
                },
                BackwardButton: {
                    //text: 'Bakåt',
                    click: function () {

                }
            },
            buttonsIcons: {
                BackwardButton: 'left-single-arrow',
                ForwardButton: 'right-single-arrow',
            }
        });

• javascript
• jquery
• fullcalendar

• Can you provide an example code or an jsFiddle? – flx Commented Apr 13, 2018 at 9:13
• 1 Added jsFiddel example of my error – AllramEst Commented Apr 13, 2018 at 9:23
• Actually I was a wrong, sorry, deleted that ment. There's nothing wrong with your code except it's buttonIcons not buttonsIcons. You can add the icon there or in the icon property of the button definition. It's just a typo. – ADyson Commented Apr 13, 2018 at 9:38
• I saw an example with the same syntax as this buttonIcons when I was searching the web for an answer. But totally missed the s in my code. – AllramEst Commented Apr 13, 2018 at 9:44
• Thanks for you help! – AllramEst Commented Apr 13, 2018 at 9:45

2 Answers 2

Edit: the code below works, however OP's code was correct barring a typo (should have been buttonIcons instead of buttonsIcons). See @ADyson's JSFiddle here: http://jsfiddle/sbxpv25p/510/

Original:

I think this might be what you're after: https://codepen.io/anon/pen/KoLZXq

It looks like you were trying to add the icons in the wrong place:

$("#calendar").fullCalendar({
    header: {
        left: "BackwardButton, ForwardButton",
        center: "title"
    },
    customButtons: {
        ForwardButton: {
            icon: "right-single-arrow",
            click: function() {}
        },
        BackwardButton: {
            icon: "left-single-arrow",
            click: function() {}
        }
    }
})

Note how each button has an icon property now.

This might be what you need as an option in fullcalendar

themeSystem:'standard'