CustomButton in Full Calendar is not displayed

Question

I am having a problem in FullCalendar, I just added a customButtons like this:

 customButtons: {
    AddEvent: {
    text: 'Add Event',
    click: function () {
     //Show Modal
    }
  }
},

But the button is not displayed. I also inspect the element in the window, but it is missing.

Here is my whole code in javascript.

 <script>

        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            var calendar;
            var date = new Date;
            initThemeChooser({

                init: function (themeSystem) {
                    calendar = new FullCalendar.Calendar(calendarEl, {
                        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                        themeSystem: themeSystem,
                        now: date,
                        editable: true, // enable draggable events
                        selectable: true,
                        nowIndicator: true,
                        aspectRatio: 1.8,
                        scrollTime: '00:00', // undo default 6am scrollTime
                        headerToolbar: {
                            left: 'today prev,next',
                            center: 'title',
                            right: 'resourceTimelineDay,resourceTimelineThreeDays,timeGridWeek,dayGridMonth,listWeek'
                        },
                        customButtons: {
                            AddEvent: {
                                text: 'Add Event',
                                click: function () {
                                   // alert('Show Modal!');
                                }
                            }
                        },
                        initialView: 'dayGridMonth',
                        views: {
                            resourceTimelineThreeDays: {
                                type: 'resourceTimeline',
                                duration: { days: 3 },
                                buttonText: '3 days'
                            }
                        },
                        resourceAreaHeaderContent: 'Rooms',
                        resources: [
                            { id: 'a', title: 'Auditorium A' },
                            { id: 'b', title: 'Auditorium B', eventColor: 'green' },
                            { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
                            {
                                id: 'd', title: 'Auditorium D', children: [
                                    { id: 'd1', title: 'Room D1' },
                                    { id: 'd2', title: 'Room D2' }
                                ]
                            },
                            { id: 'e', title: 'Auditorium E' },
                            { id: 'f', title: 'Auditorium F', eventColor: 'red' },
                            { id: 'g', title: 'Auditorium G' },
                            { id: 'h', title: 'Auditorium H' },
                            { id: 'i', title: 'Auditorium I' },
                            { id: 'j', title: 'Auditorium J' },
                            { id: 'k', title: 'Auditorium K' },
                            { id: 'l', title: 'Auditorium L' },
                            { id: 'm', title: 'Auditorium M' },
                            { id: 'n', title: 'Auditorium N' },
                            { id: 'o', title: 'Auditorium O' },
                            { id: 'p', title: 'Auditorium P' },
                            { id: 'q', title: 'Auditorium Q' },
                            { id: 'r', title: 'Auditorium R' },
                            { id: 's', title: 'Auditorium S' },
                            { id: 't', title: 'Auditorium T' },
                            { id: 'u', title: 'Auditorium U' },
                            { id: 'v', title: 'Auditorium V' },
                            { id: 'w', title: 'Auditorium W' },
                            { id: 'x', title: 'Auditorium X' },
                            { id: 'y', title: 'Auditorium Y' },
                            { id: 'z', title: 'Auditorium Z' }
                        ],
                        events: [
                            { id: '1', resourceId: 'b', start: '2020-09-07T02:00:00', end: '2020-09-07T07:00:00', title: 'event 1' },
                            { id: '2', resourceId: 'c', start: '2020-09-07T05:00:00', end: '2020-09-07T22:00:00', title: 'event 2' },
                            { id: '3', resourceId: 'd', start: '2020-09-06', end: '2020-09-08', title: 'event 3' },
                            { id: '4', resourceId: 'e', start: '2020-09-07T03:00:00', end: '2020-09-07T08:00:00', title: 'event 4' },
                            { id: '5', resourceId: 'f', start: '2020-09-07T00:30:00', end: '2020-09-07T02:30:00', title: 'Click for Google', url: 'https://google.com' }
                        ]
                    });
                    calendar.render();
                },

                change: function (themeSystem) {
                    calendar.setOption('themeSystem', themeSystem);
                }

            });

        });

    </script>

How can I add a customButton on the Full Calendar?

Answer 1

You created the button but you have to add it to the header menu somewhere. At the moment fullCalendar doesn't know where you want to display it.

There's an example shown in the documentation: https://fullcalendar.io/docs/customButtons

var calendar = new Calendar(calendarEl, {
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
      }
    }
  },
  headerToolbar: {
    left: 'prev,next today myCustomButton',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});