ShopifyでFullCalendar（無料）を使って営業日カレンダーを表示する

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/locales/ja.js"></script>

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
  
    var calendar = new FullCalendar.Calendar(calendarEl, {
  
      googleCalendarApiKey: 'APIキー',
      eventSources: [
        {
          googleCalendarId: 'カレンダーID',//自分で作成したカレンダー
          display: 'background',
          className: 'gcal-event'
        },
        {
          googleCalendarId: 'ja.japanese#holiday@group.v.calendar.google.com',//日本の祝日カレンダー
          display: 'background',
          className: 'gcal-event'
        }
      ],
      initialView: 'dayGridMonth',//デフォルトを月表示にする
      headerToolbar: {
        left: '',
        center: 'title',
        right: 'prev,today,next'//ボタンの並び順
      },
      buttonText: {
        today: '今月',
        month: '月'
      },
      locale: 'ja',//日本語表示設定
      dayCellContent: function (e) {
        e.dayNumberText = e.dayNumberText.replace('日', '');//日付のセルから日を削除
      },
      fixedWeekCount: false,//6週間表示をやめる
      contentHeight: 300,//カレンダー本体の高さ
      aspectRatio: 1//カレンダーサイズのアスペクト比
    });
  
    calendar.render();

});

      dayCellContent: function (e) {
        e.dayNumberText = e.dayNumberText.replace('日', '');
      },

<div class="grid page-width top-spacing-small">
  <div class="col-6">
    <div id="calendar"></div>
  </div>
</div>

#calendar {
  width: 300px;
}

#calendar h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
}

#calendar table {
  background: var(--color-body-background);
}

#calendar table a {
  color: var(--color-base);
}

#calendar .fc-event-title {
  display: none;
}

#calendar th,
#calendar td,
#calendar .fc-col-header,
#calendar .fc-scrollgrid-sync-table {
  margin: 0;
  padding: 0;
}

#calendar .fc-daygrid-day-events {
  display: none;
}

#calendar a {
  pointer-events: none;
  text-decoration: none;
}

#calendar .fc-bg-event {
  background: var(--gradient-base-background-2)!important;
  opacity: 1!important;
}