标题全日历自定义月份显示

Question

大家好！我是一名初学者 javascript 开发人员。现在我正在用fullcalendar练习并遇到这样的问题。

需要在表头显示上个月和下个月的名称。

例如，我需要在标题中显示“prevbut July August September nextbut”。

我在 fuulcalendar 文档中找不到解决方案，在互联网上也找不到任何内容。也许有人面临这样的问题并可以帮助我？我将非常感激！

Answer 1

function drawCalendar() {
    const calendarEl = document.getElementById('calendar');
    
    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'ru',
        initialView: 'dayGridMonth',
        fixedWeekCount: false,
        firstDay: 1,
        displayEventTime: false,
        height: 700,
        
        dayMaxEventRows: true, // for all non-TimeGrid views
            views: {
                timeGrid: {
                dayMaxEventRows: 6 // adjust to 6 only for timeGridWeek/timeGridDay
                }
            },
                    
        headerToolbar: {
        left: 'prev title next',
        center: '',
        right: ''
        },
       
        views: {
            dayGridMonth: {
                titleFormat: {
                    month: 'long',
                },
                dayHeaderFormat: {
                    weekday: 'long',
                }
            }
        },

        events: eventsArray,

        eventClick: function(info) {
            showEvent(info);
            // console.log(info.event.extendedProps);
            // console.log(info);
        },

        eventDidMount: function (info) {
            if (info.event.backgroundColor) {
                info.el.style.background = info.event.backgroundColor;
            }
          }
    });
    
    calendar.render();
};

drawCalendar();

let eventBlock = document.getElementById("event__modal");

function showEvent(info) {
    document.getElementById("event__overlay").classList.toggle("slidedIntoView");
    eventBlock.innerHTML = "";

    if (info.event.extendedProps.category == 'Презентация') {
        eventBlock.innerHTML += `
            <div class="event__modal">
                <div class="event__modal__top">
                    <div class="event__modal__category" style="background-color: #349EFF">${info.event.extendedProps.category}</div>
                    <img src="images/close-modal-icon.png" onclick="closeEvent()" alt="Иконка закрытия" class="close__icon">
                </div>
                <div class="event__modal__title">${info.event.title}</div>
                <div class="event__modal__spikers">${info.event.extendedProps.spikers}</div>
                <div class="event__modal__description">${info.event.extendedProps.description}</div>
                <div class="event__modal_bottom">
                    <div class="event__modal__time">Состоится ${info.event.start}</div>
                    <div class="event__modal__reminder">
                        <button class="event__modal__reminder__button">Напомнить</button>
                        <img src="images/reminder-icon.png" alt="Иконка напоминания" class="reminder__icon">
                    </div>
                </div>
            </div>
        `;
    }

    else {
        eventBlock.innerHTML += `
            <div class="event__modal">
            <div class="event__modal__top">
                    <div class="event__modal__category" style="background-color: #FFAE34">${info.event.extendedProps.category}</div>
                    <img src="images/close-modal-icon.png" onclick="closeEvent()" alt="Иконка закрытия" class="close__icon">
                </div>
                <div class="event__modal__title">${info.event.title}</div>
                <div class="event__modal__spikers">${info.event.extendedProps.spikers}</div>
                <div class="event__modal__description">${info.event.extendedProps.description}</div>
                <div class="event__modal_bottom">
                    <div class="event__modal__time">Состоится ${info.event.start}</div>
                    <div class="event__modal__reminder">
                        <button class="event__modal__reminder__button">Напомнить</button>
                        <img src="images/reminder-icon.png" alt="Иконка напоминания" class="reminder__icon">
                    </div>
                </div>
            </div>
        `;
    }
}

function closeEvent(event) {
    document.getElementById("event__overlay").classList.remove("slidedIntoView");
}