完整日历中的自定义按钮不显示

Question

我在 FullCalendar 中遇到问题，我刚刚添加了customButtons这样的内容：

 customButtons: {

    AddEvent: {

    text: 'Add Event',

    click: function () {

     //Show Modal

    }

  }

},

但按钮不显示。我还检查了窗口中的元素，但它丢失了。

这是我的整个 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'

                            }

                        },

如何在完整日历上添加自定义按钮？

Answer 1

您创建了该按钮，但必须将其添加到标题菜单中的某个位置。目前 fullCalendar 不知道你想在哪里显示它。文档中有一个示例：https://fullcalendar.io/docs/customButtonsvar calendar = new Calendar(calendarEl, {&nbsp; customButtons: {&nbsp; &nbsp; myCustomButton: {&nbsp; &nbsp; &nbsp; text: 'custom!',&nbsp; &nbsp; &nbsp; click: function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('clicked the custom button!');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; headerToolbar: {&nbsp; &nbsp; left: 'prev,next today myCustomButton',&nbsp; &nbsp; center: 'title',&nbsp; &nbsp; right: 'dayGridMonth,timeGridWeek,timeGridDay'&nbsp; }});