4

I'm trying to add an icon taken from the react-icons package as a custom header button in my Full Calendar. Because the icons are exported from the package and not used as class names I can't seem to render that icon or any icons for that matter. I was hoping you could do something like this:

const customButtons = {
        custom1: {
            icon: <MdWatchLater />,
            click: function () {
                ('clicked the custom button!');
            }
        }
    }

but that throws an error. However, this approach doesn't work either (using font awesome icons), it just renders a square:

const customButtons = {
        custom1: {
            icon: "fa fa-lock",
            click: function () {
                ('clicked the custom button!');
            }
        }
    }

Has anyone tried this before? I don't mind which approach to take just as long as I can load an icon as a custom button.

UPDATED

Posting my Full Calendar component taking in the custom buttons props for reference:

UPDATED Code snippet instead of photo:


<CustomCalendar
  customButtons={customButtons}
  header={{
     right: '',
     center: '',
     left: 'today prev,next custom1'
}} />
Nats
  • 160
  • 3
  • 20
  • 1
    please don't post pictures of your code, it doesn't help anyone who might want to re-use it to amend it or make a demo. You've posted your other code as text correctly, so please so the same with your update at the bottom. Thanks. – ADyson Jun 16 '20 at 22:22
  • edited with code snippet instead, thanks. – Nats Jun 18 '20 at 17:18
  • No answer to this question yet? For jQuery I see this is supported as simple as http://jsfiddle.net/9por3Lod/1/ – Vlado Jan 26 '22 at 20:54

0 Answers0