如何设计完整日历headerToolBar的样式

<div class="calendar-header-toolbar">
    <button class="prev-month">Prev</button>
    <span class="current-month-year"></span>
    <button class="next-month">Next</button>
</div>

.calendar-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
}

.prev-month, .next-month {
    padding: 5px 10px;
    cursor: pointer;
}

.current-month-year {
    font-weight: bold;
    margin: 0 10px;
}

document.addEventListener('DOMContentLoaded', function() {
    const currentMonthYearElement = document.querySelector('.current-month-year');
    const prevMonthButton = document.querySelector('.prev-month');
    const nextMonthButton = document.querySelector('.next-month');

    let currentDate = new Date();

    function updateCalendarHeader() {
        const options = { year: 'numeric', month: 'long' };
        currentMonthYearElement.textContent = currentDate.toLocaleDateString(undefined, options);
    }

    prevMonthButton.addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() - 1);
        updateCalendarHeader();
    });

    nextMonthButton.addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() + 1);
        updateCalendarHeader();
    });

    updateCalendarHeader();
});