javascript - FullCalendar custom button icon not showing - Stack Overflow

admin管理员组

文章数量:1344950

      $('#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

Share Improve this question Follow edited Apr 13, 2018 at 9:23 AllramEst asked Apr 13, 2018 at 9:00 AllramEstAllramEst 1,44944 gold badges2828 silver badges5555 bronze badges 6

• 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

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

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' 

本文标签： javascriptFullCalendar custom button icon not showingStack Overflow