<div id="calendar"></div>

document.addEventListener( 'DOMContentLoaded', () => {
  const calendarEl = document.getElementById( 'calendar' );
  const calendar = new FullCalendar.Calendar( calendarEl, {
    initialView: 'dayGridMonth',
    locale: 'local',
    headerToolbar: {
      left: 'doubleLeft,prev,next,doubleRight',
      center: 'title',
      right: 'dayGridMonth,dayGridWeek,timeGridDay,listMonth'
    },
    footerToolbar: {
      left: '',
      center: 'doubleLeft,prev,next,doubleRight',
      right: ''
    },
    buttonText: {
      month: '月',
      week: '週',
      day: '日',
      list: '一覧'
    },
    customButtons: {
      doubleLeft: {
        text: '',
        icon: 'chevrons-left',
        click: () => {
          // 二月戻る
          calendar.prev();
          calendar.prev();
        }
      },
      doubleRight: {
        text: '',
        icon: 'chevrons-right',
        click: () => {
          // 二月進む
          calendar.next();
          calendar.next();
        }
      },
      
    }
  } );
  
  calendar.render();
} );

External CSS

  1. https://cdn.jsdelivr.net/npm/fullcalendar@5.11.2/main.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/fullcalendar@5.11.2/main.min.js