CustomButton in Full Calendar is not displayed

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?